反応ナビゲーションを起動して実行しようとしましたが、ナビゲーション項目を独自のコンポーネントに移動しようとすると問題が発生します。
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
}
})