react-native - React-native-navigation 通过不同的组件而不是从页面导航

Question

我的主页包含一个视图。此视图包含一个带有项目的平面列表。平面列表正在通过不同的组件呈现

我应该能够从组件而不是我的主页中使用类似this.props.navigation.navigate('DetailPage')的东西。

我认为我应该将导航作为道具传递给但不确定我该怎么做。

导航文件

export const HomePageStack = StackNavigator({
      Homepage:{
          screen:homePage,
      },
      DetailPage:{
          screen: DetailPage,
      }

})

主页屏幕

render(){
   return(
       <View>
           <DetailedArea />
       </View>
)}

详细区域

render(){
   return(
      <TouchableHighlight onPress={this.props.navigation.navigate('DetailPage')}>
         <Text>CLICK HERE TO GO TO DETAIL PAGE</TEXT>
      </TouchableHighlight>
)}

Answer 1

有HomeScreen，this.props.navigation但没有传递给DetailedArea.

我推荐以下内容：

主屏幕

render(){
   return(
       <View>
           <DetailedArea onNavigate={() =>  this.props.navigation.navigate('DetalPage')} />
       </View>
)}

详细区域

render(){
   return(
      <TouchableHighlight onPress={this.props.onNavigate}>
         <Text>CLICK HERE TO GO TO DETAIL PAGE</TEXT>
      </TouchableHighlight>
)}