我现在已经在React Native Web中与Navigator挣扎了两天，并且无法弄清问题是什么。值得注意的是，在尝试使用Navigator之前，一切正常，并且此代码在浏览器上运行。我在下面有以下代码并继续收到错误消息：
＆＃34; bundle.js：784警告：React.createElement：type不应为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。检查Home。＆＃34;
其次是：
＆＃34; bundle.js：640 Uncaught Invariant Violation：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。检查Home。＆＃34;
基本上，我有一个名为＆＃34; Home＆＃34;我正在尝试使用导航器渲染相当深度嵌套在此组件中的renderScene，但它不起作用。我在另一个应用程序上使用了相同的Navigator代码并且它有效，减去了传递的props中的一些更改。任何帮助将不胜感激！
const React = require('react-native-web')
const {
Text,
View,
StyleSheet,
Image,
Navigator,
TouchableHighlight,
Component
} = React;
var Home = React.createClass({
renderScene(route, navigator) {
if(route.name == 'Baseball') {
return <Baseball navigator={navigator} {...route.passProps} />
}
if(route.name == 'Football') {
return <Football navigator={navigator} {...route.passProps} />
}
},
render() {
return (
<View>
<View>
<Image
style={styles.homeImage}
source={require('./img/baseball.png')}>
<View style={styles.tagLineWrapper}>
<Text style={styles.tagLine}>
Real Sports.
</Text>
<Text style={styles.tagLine}>
Real Skill.
</Text>
<Text style={styles.tagLine}>
Real Prizes.
</Text>
</View>
</Image>
</View>
<View style = {styles.appStoreBar}>
<Text style={styles.darkText}>
Available Now!
</Text>
<View style={styles.appStoreButton}>
<Image
style={styles.button}
source={require('./img/app-store-button-yellow.png')}
/>
</View>
</View>
<Text style = {styles.instructionsHeader}>
How Pick a Play Works
</Text>
<View style = {styles.doubleIphoneWrapper}>
<View style = {styles.singleIphoneWrapper}>
<Text style = {styles.instructionsSubHeaderText}>
1. Pick a Contest
</Text>
<View style={styles.instructionsWrapper}>
<Text style={styles.instructions}>
Pick 5, 6, or 7 correctly and win the amount shown on the right.
</Text>
</View>
<View style={styles.iphoneAndChevronWrapper}>
<Image
style={styles.chevronIcons}
source={require('./img/chevron-left.png')}
/>
<View style={styles.iphoneAndScreenWrapper}>
<Image
style={styles.iphone}
source={require('./img/iphone5-vertical.png')} >
<Navigator
initialRoute={{name: 'Baseball'}}
renderScene={this.renderScene} />
</Image>
</View>
<Image
style={styles.chevronIcons}
source={require('./img/chevron-right.png')}
/>
</View>
</View>
<View style = {styles.singleIphoneWrapper}>
<Text style = {styles.instructionsSubHeaderText}>
1. Pick a Game
</Text>
<View style={styles.instructionsWrapper}>
<Text style={styles.instructions}>
Make sure it’s a game you are available to watch in real time.
</Text>
</View>
<View style={styles.iphoneAndChevronWrapper}>
<Image
style={styles.chevronIcons}
source={require('./img/chevron-left.png')}
/>
<Image
style={styles.iphone}
source={require('./img/iphone5-vertical.png')}>
</Image>
<Image
style={styles.chevronIcons}
source={require('./img/chevron-right.png')}
/>
</View>
</View>
</View>
</View>
)
}
})
var Baseball = React.createClass({
_navigate(name) {
this.props.navigator.push({
name: 'Football',
passProps: {
name: name
}
})
},
render() {
return (
<View style={[styles.screenView, {backgroundColor: 'blue'}]}>
</View>
)
}
})
var Football = React.createClass({
_navigate(name) {
this.props.navigator.push({
name: 'Baseball',
passProps: {
name: name
}
})
},
render() {
return (
<View style={[styles.screenView, {backgroundColor: 'green'}]}>
</View>
)
}
})
const styles = StyleSheet.create({
homeText: {
color: '#1C1C1C',
fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'
},
homeImage: {
maxHeight: 350,
flex: 0
},
tagLineWrapper: {
alignSelf: 'flex-end',
marginRight: 200,
marginTop: 220
},
tagLine: {
fontSize: 20,
fontStyle: 'italic',
color: 'white',
alignSelf: 'flex-start',
marginTop: 10,
fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'
},
instructionsHeader: {
fontSize: 27,
fontWeight: 'bold',
marginTop: 40,
color: '#1C1C1C',
alignSelf: 'center'
},
doubleIphoneWrapper: {
flexDirection: 'row',
justifyContent: 'center'
},
singleIphoneWrapper: {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
margin: 40
},
instructionsSubHeaderText: {
fontSize: 18,
color: '#1C1C1C',
marginTop: 60,
alignSelf: 'center'
},
instructionsWrapper: {
width: 194,
height: 64,
alignSelf: 'center'
},
instructions: {
fontSize: 13,
padding: 20,
textAlign: "center"
},
appStoreBar: {
alignSelf: 'stretch',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 30,
backgroundColor: '#ededed'
},
darkText: {
fontSize: 24,
color: '#1C1C1C',
marginRight: 10
},
appStoreButton: {
width: 200,
marginLeft: 10
},
iphone: {
width: 300,
margin: 30
},
chevronIcons: {
height: 30,
alignSelf: 'center',
margin: 0
},
iphoneAndChevronWrapper: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
},
screenView: {
height: 338,
width: 192,
alignSelf: 'center',
marginTop: 100,
},
iphoneAndScreenWrapper: {
justifyContent: 'center',
alignItems: 'center',
}
})
module.exports = Home;
答案 0 :(得分：0)
这可能会迟到，但您应该知道React Native Navigator不能与React Native Web一起使用。但我想有一些替代解决方案。我现在不记得了。