访问 header 组件内的 React 堆栈导航

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

访问 header 组件内的 React 堆栈导航

Access to react stack navigation inside header component

react-native

stack-navigator