react-native - React Native StackNavigator 在 navigationOptions 覆盖新闻参数

Question

我想为所有屏幕制作全局(相同)标题，但无法弄清楚如何使 onPress={ () => state.params.onPressFilterView() } 工作。当我将 navigationOptions 移动到静态组件时，它可以工作，但是当在 StackNavigator 中时，它的选项不起作用。那么有人知道如何让它发挥作用吗？或者我如何编写可以在组件中覆盖的 onPress 事件函数？

简单的 StackNavigator:

const HomeNavigator = StackNavigator({
    HomePage: {
        screen: HomeNavigationDrawer,
    },
}, {
    navigationOptions: ({ navigation }) => {
    const {state} = navigation;

    let headerRight = <FeatherIcon.Button name='filter'
         backgroundColor="#444444"
         color="#a2a2a2"
         size={ 30 }
         onPress={ () => state.params.onPressFilterView() }
    >
    </FeatherIcon.Button>;

    return { headerRight  };
    },
});

并添加到组件中:

...
componentDidMount() {
    this.props.navigation.setParams({
        onPressFilterView: this.onPressFilterView.bind(this),
    });
}

onPressFilterView() {}

...

但是抛出错误 state.params.onPressFilterView - undefined is not an object

Answer 1

您需要在 HomePage 对象中传递 navigationOptions。

const HomeNavigator = StackNavigator({
    HomePage: {
        screen: HomeNavigationDrawer,
        navigationOptions: ({ navigation }) => {
            const {state} = navigation;

            let headerRight = <FeatherIcon.Button name='filter'
                                                  backgroundColor="#444444"
                                                  color="#a2a2a2"
                                                  size={ 30 }
                                                  onPress={ () => state.params.onPressFilterView() }
            >
            </FeatherIcon.Button>;

            return { headerRight  };
        }
    }
});