访问标题组件内部的堆栈导航

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

您可以尝试以下方法：