react-native - react-navigation - 从子组件导航

Question

我有一个排行榜，它调用一个组件并将其数据传递给它，如下所示:

   _renderItem =({item}) => (
    <childComponent
        key={item._id}
        id={item._id}
        name={item.name}
    />
   );

在 childComponent 中，我尝试这样做:

    <TouchableOpacity onPress={() => this.props.navigation.navigate("Profile", { id: this.props.id})} >
       <View>
         <Right>
              {arrowIcon}
         </Right>
       </View>
    </TouchableOpacity>

我希望它随后会转到个人资料页面并根据传递给它的 id 获取正确的数据。问题是，当我单击箭头转到个人资料页面时，出现错误 无法读取属性“未定义的导航” .我已经将排行榜和 childComponent 放在我的 HomeDrawerrRoutes.js 和 MainStackRouter.js 中。任何帮助都会很棒，谢谢。

Answer 1

这是一个 3 页的示例，展示了如何传递 navigate子组件的函数以及如何自定义从 StackNavigator 中发送到屏幕的 Prop

// subcomponent ... receives navigate from parent
const Child = (props) => {
    return (
        <TouchableOpacity 
            onPress={() => props.navigate(props.destination) }>
            <Text>{props.text}>>></Text>
        </TouchableOpacity>
    );
}
// receives navigation from StackNavigator
const PageOne = (props) => {
    return (
        <View>
            <Text>Page One</Text>
            <Child 
                navigate={props.navigation.navigate} 
                destination="pagetwo" text="To page 2"/>
        </View>
    )
}
// receives custom props AND navigate inside StackNavigator 
const PageTwo = (props) => (
    <View>
        <Text>{props.text}</Text>
        <Child 
            navigate={props.navigation.navigate} 
            destination="pagethree" text="To page 3"/>
    </View>
);
// receives ONLY custom props (no nav sent) inside StackNAvigator
const PageThree = (props) => <View><Text>{props.text}</Text></View>

export default App = StackNavigator({
    pageone: { 
        screen: PageOne, navigationOptions: { title: "One" } },
    pagetwo: { 
        screen: (navigation) => <PageTwo {...navigation} text="Page Deux" />, 
        navigationOptions: { title: "Two" } 
    },
    pagethree: { 
        screen: () => <PageThree text="Page III" />, 
        navigationOptions: { title: "Three" }
    },
});