Question

在SamplePage内，我可以通过this.props.navigation访问导航。在SampleHeader组件内部，我有一个按钮。如何在SampleHeader内部声明的按钮onPress中访问导航？

  const AppStackNavigator = createStackNavigator({    
        SamplePage: {
            screen: SamplePage,
            navigationOptions: {
                title: 'title',
                headerStyle: styles.headerStyle,
                headerTintColor: styles.headerTintColor,
                headerTitleStyle: styles.headerTitleStyle,
                headerRight: <SampleHeader></SampleHeader>
            }
        }
    ...

Answer 1

尝试以下代码，看看其是否有效，您可以将导航作为道具传递给SampleHeader：

const AppStackNavigator = createStackNavigator({    
        SamplePage: {
            screen: SamplePage,
            navigationOptions: {
                title: 'title',
                headerStyle: styles.headerStyle,
                headerTintColor: styles.headerTintColor,
                headerTitleStyle: styles.headerTitleStyle,
                headerRight: <SampleHeader navigation={this.props.navigation}></SampleHeader>
            }
        }

或者您可以那样创建自己的SampleHeader，并且在页面中调用它时，假设SamplePage可以添加，

class SamplePage extends Component {

render(){

return(
<SampleHeader navigation={this.props.navigation} />
)
}
}

然后在那之后，您可以通过this.props.navigation访问buttonCLick。

希望有帮助。毫无疑问

Answer 2

您可以尝试以下操作：

   SamplePage: {
      screen: SamplePage,
      navigationOptions: ({ navigation }) => ({
        ....
        headerRight: <SampleHeader navigation={navigation}/>
        ....
      })
   }

访问头组件内部的React Stack Navigation

2 个答案: