Question

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

Simple 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不是对象

Answer 1

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

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

在pressOrame中的React Native StackNavigator覆盖了按下param

1 个答案: