react navigationで子コンポーネントの中でnavigationさせる時に、propを渡す必要がある。
いいサンプルが見つかったので紹介する。
// subcomponent ... receives navigate from parent
const Child = (props) => {
return (
onPress={() => props.navigate(props.destination) }>
{props.text}>>>
);
}
// receives navigation from StackNavigator
const PageOne = (props) => {
return (
Page One
navigate={props.navigation.navigate}
destination="pagetwo" text="To page 2"/>
)
}
// receives custom props AND navigate inside StackNavigator
const PageTwo = (props) => (
{props.text}
navigate={props.navigation.navigate}
destination="pagethree" text="To page 3"/>
);
// receives ONLY custom props (no nav sent) inside StackNAvigator
const PageThree = (props) => {props.text}
export default App = StackNavigator({
pageone: {
screen: PageOne, navigationOptions: { title: "One" } },
pagetwo: {
screen: (navigation) => ,
navigationOptions: { title: "Two" }
},
pagethree: {
screen: () => ,
navigationOptions: { title: "Three" }
},
});
元ページ 「react-navigation - navigating from child component」
https://stackoverflow.com/questions/46269595/react-navigation-navigating-from-child-component