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

Question

我目前正在尝试使用覆盖我名为 'AppointmentBookingView' 的视图中右侧导航按钮的行为。我对 Navigator 和 NavigationBar 如何协同工作感到非常困惑，因此无法找出解决方案。谁能澄清这是否可以做到？

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

    );
}

这是我想覆盖行为的地方

AppointmentBookingView.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
    }
},

...

我的回答有点晚了，希望对你有帮助

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

How do I change the navigation bar buttons in a view?

view

navigator

react-native