Я борется с Navigator in React Native Web за хорошие 2 дня и не могу понять, в чем проблема. Стоит отметить, что прежде чем пытаться использовать Navigator, все работает нормально, и этот код работает в браузере. У меня есть следующий код ниже и продолжайте получать сообщение об ошибке:React Native Navigator не работает
"bundle.js: 784 Warning: React.createElement: type не должен быть пустым, неопределенным, логическим или номером. Он должен быть строкой (для DOM элементы) или ReactClass (для составных компонентов). Проверьте метод рендеринга Home. "
Далее следуют:
«bundle.js: 640 Uncaught Инвариантная Нарушение: Тип элемента недействителен: ожидается строка (для встроенных компонентов) или класса/функции (для составных компонентов), но получил не определено Проверьте метод рендеринга Home. "
В принципе, у меня есть компонент под названием «Главная», и я пытаюсь сделать renderScene, используя Navigator, достаточно глубоко вложенный в этот компонент, но он не работает. Я использовал этот же код Navigator в другом приложении, и он сработал, минус несколько изменений в реквизитах. Любая помощь будет принята с благодарностью!
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;
Какая версия реагирования вы используете? –
react-native-cli: 1.0.0 –
И это реакция-родная-паутина. –