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>
)}

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

React-native-navigation navigate through a different component instead of from a page

react-native

react-native-navigation