【发布时间】：2020-09-20 08:24:47
【问题描述】：
我之前有一个使用 React Navigation 的堆栈导航器的工作项目，但在大约一天前完美工作后突然停止工作。 错误是
警告：React.createElement：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：%s.%s%s，未定义，您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。
我所有的导入都是正确的，我已经对它们进行了测试，并且代码昨天运行正常。这是一个代码示例：
class PreviousQuestions extends React.Component {
firebaseRef
constructor(props){
super(props)
this.state = {
dataArrayDisplay : [],
}
this.firebaseRef = Firebase.database().ref(
`/UserToQuestion/${Firebase.auth().currentUser.uid}`
);
}
async componentDidMount() {
// grab the data from the server and call this.onFirebaseValueChanged every time it changes
this.firebaseRef.orderByValue().on("value", this.onFirebaseValueChanged);
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font,
});
this.setState({ isReady: true });
this._notificationSubscription = Notifications.addListener(this._handleNotification)
}
_handleNotification = notification => {
Vibration.vibrate();
console.log(notification);
};
componentWillUnmount() {
// detach all listeners to this reference when component unmounts (very important!)
console.log('unmounting previosu questions')
this.firebaseRef.off();
}
onFirebaseValueChanged = snapshot => {
....
};
renderItem = ({item}) =>{
return(
<Card >
<CardItem >
<Body>
<Text>{item.title}</Text>
</Body>
<Right>
<NativeBaseButton transparent
onPress={() => {this.props.navigation.navigate('Question', {
...})} }>
<Text>View Q</Text>
<Icon active name="arrow-forward" />
</NativeBaseButton>
</Right>
</CardItem>
</Card>
)
}
render(){
if(!this.state.isReady){
return <AppLoading/>
}
else{
return (
<Container>
<Content padder>
<FlatList
style={styles.container}
data={this.state.dataArrayDisplay}
renderItem={this.renderItem}
/>
</Content>
</Container>
);
}
}
}
const styles = StyleSheet.create({
container:{
flex:1
},
})
withNavigation(PreviousQuestions)
function openLink(link){
WebBrowser.openBrowserAsync(link).catch(error => {console.log(error),Alert.alert(error)
})
}
function displayURL(URL){
if(URL != '' && URL != null && URL != undefined){
return(
<CardItem>
<NativeBaseButton transparent textStyle={{color: '#87838B'}}
onPress ={() => openLink(URL)}>
<Text>Click for helpful website</Text>
</NativeBaseButton>
</CardItem>
)
}else{
return(
null
)
}
}
function PreviousQuestionNav({navigation}){
const Stack = createStackNavigator()
console.log('your squestionnav running')
return(
<Stack.Navigator initialRouteName="Your Questions">
<Stack.Screen name="Your Questions" component={PreviousQuestions}
options={{
headerLeft: () => (
<IconButton
icon="menu"
color={Colors.orange500}
size={30}
onPress={() => navigation.openDrawer()}
/>
)
}}/>
<Stack.Screen name="Question" component={Question} />
</Stack.Navigator>
)
}
export default PreviousQuestionNav
function Question({route,navigation}){
return (
<Container>
<Content>
<Card style={{flex: 0}}>
<CardItem>
<Body>
<Text>
sometext
</Text>
<Text>some text</Text>
</Body>
</CardItem>
{displayURL(someURL)}
<CardItem>
</CardItem>
</Card>
</Content>
</Container>
)
}
主要问题是：
onPress={() => {this.props.navigation.navigate('问题', { ...})} }>
这似乎触发了错误，但直到现在它工作正常。 是否有一些我在不知不觉中更新的重大更改，或者我的代码是否以某种方式不正确？谢谢
【问题讨论】：
-
似乎与反应导航无关，您有一个 React.createElement
-
@anthonywillismuñoz 渲染 jsx 只是
React.createElement(reactjs.org/docs/react-api.html#creating-react-elements) 的语法糖。所以 OP 可能没有使用React.createElement，而是其中一个组件有问题。 -
@BasvanderLinden 我这样做了，但我仍然收到错误，我已经编辑了问题以在我的手机上显示错误
-
由于错误提到了
HeaderBackButton，请尝试查看您在headerLeft属性中呈现的内容。但是使用这里的代码我们无法重现问题，所以我认为创建一个重现问题的snack 并将其链接到此处是个好主意。 -
@BasvanderLinden 我重置了缓存并且它起作用了......不过，谢谢你为我指明了正确的方向。
标签： react-native expo react-navigation react-navigation-v5