我一直试图使用react navigation启动并运行,但是当我尝试将导航项移动到它们自己的组件时遇到了问题。
HomeScreen.js
import React, { Component } from 'react'; import { StyleSheet, View, Text } from 'react-native'; import NavButton from '../components/NavButton' class HomeScreen extends Component { render() { return ( <View style={styles.container}> <Text> Hello World </Text> <NavButton navigate={this.props.navigator} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' } }); export default HomeScreen;
然后在NavButton组件中,我尝试导航到新屏幕。
class NavButton extends Component { render() { return ( <View> <Button title="Go to About" onPress={() => this.props.navigator.navigate('About')} /> </View> ); } } export default NavButton;
但是我仍然收到错误消息“无法读取未定义的属性'navigate'。
这也是我的Router.js文件。
import React from 'react';
import {StackNavigator} from 'react-navigation';
import HomeScreen from '../screens/HomeScreen'
import AboutScreen from '../screens/AboutScreen'
export const AppNavigator = StackNavigator({
Home: {
screen: HomeScreen
},
About: {
screen: AboutScreen
}
})
我一直在尝试启动和运行React导航,但是当我尝试将导航项移动到它们自己的组件时遇到了一个问题。 HomeScreen.js从'...