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

时间:2016-03-24 16:15:38

标签: view react-native navigator

我目前正试图在我的视图中使用覆盖右侧导航按钮的行为,名为“AppointmentBookingView'”。我完全混淆了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)}
        />

    );
}

这里我想覆盖行为

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>

1 个答案:

答案 0 :(得分:1)

你能做的是这样的事情:

...

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

...

我的回答有点晚了,但我希望有所帮助