如何更改视图中的导航栏按钮

Question

我目前正试图使用覆盖视图中名为"约会预订视图"的右侧导航按钮的行为。我对Navigator和NavigationBar是如何协同工作的完全感到困惑，所以还没能找到解决方案。有人能澄清一下这是否可以做到吗？

我正在使用React Native Gifted Forms。

myapp.ios.js:

static NavbarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        if (index === 0) {
            return null;
        }
        var previousRoute = navState.routeStack[index - 1];
        return (
            <TouchableOpacity
                onPress={() => navigator.pop()}
                style={styles.navBarLeftButton}>
                <Text style={[styles.navBarText, styles.navBarButtonText]}>
                    Back
                </Text>
            </TouchableOpacity>
        );
    },
    RightButton(route, navigator, index, navState) {
    },
    Title(route, navigator, index, navState) {
        return (
            <Text style={[styles.navBarText, styles.navBarTitleText]}>
                {route.name || 'MyApp'}
            </Text>
        );
    }
};
render(){
    return (
        <Navigator
            style={styles.appContainer}
            configureScene={this.configureScene}
            initialRoute={{name: 'MyApp', component: BookAppointmentView }}
            navigationBar={
                <Navigator.NavigationBar
                    style={styles.navBar}
                    routeMapper={MyApp.NavbarRouteMapper}
                />
            }
            renderScene={this.renderScene.bind(this)}
        />
    );
}

这是我想覆盖行为的地方

预约预订View.js

<GiftedForm
    formName='bookingForm' // GiftedForm instances that use the same name will also share the same states
    openModal={(route) => {
        route.giftedForm = true;
        this.props.navigator.push(route);
    }}
>
</GiftedForm>

Answer 1

您可以做的事情如下：

...
RightButton(route, navigator, index, navState) {
    if (route.name === 'AppointmentBookingView') {
        // Here put the button you want and whatever you want it to do
    }
},
...

我的答案是有点晚了，但我希望它能帮助