时间戳

首页 > 解决方案 > 如何在嵌套的 tabNavigation 中编辑每个屏幕的 navigationOptions？

javascript - 如何在嵌套的 tabNavigation 中编辑每个屏幕的 navigationOptions？

问题描述

我正在尝试在标题中显示标题，并在标题中显示正确的操作按钮。

我试图关注https://reactnavigation.org/docs/en/navigation-options-resolution.html#a-tab-navigator-contains-a-stack-and-you-want-to-hide-the-tab -bar-on-specific-screens 但没有任何进展。

导航.js

const FeedStack = createStackNavigator({
    Welcome: {
        screen: WelcomeScreen,
        navigationOptions: {
            headerTitle: 'Welcome',
        },
    },
    Auth: {
        screen: AuthScreen,
        navigationOptions: {
            headerTitle: 'Login',
        },
    },
}, {
    defaultNavigationOptions: {
        headerStyle: {
            backgroundColor: Platform.OS === 'android' ? Colors.headerColor : 'white',
        },
        headerTintColor: Platform.OS === 'android' ? 'white' : Colors.secondaryColor,
    },
});

const TabNavigator = createBottomTabNavigator({
    DailyTask: {
        screen: DailyTaskScreen,
        navigationOptions: {
            headerTitle: 'Daily Task',
        },
    },
    MyTasks: {
        screen: MyTasksScreen,
        navigationOptions: {
            headerTitle: 'My Tasks',
        },
    },
    SelectCategory: {
        screen: SelectCategoryScreen,
        navigationOptions: {
            headerTitle: 'Select Category',
        },
    },
}, {
    defaultNavigationOptions: {
        headerStyle: {
            backgroundColor: Platform.OS === 'android' ? Colors.headerColor : 'white',
        },
        headerTintColor: Platform.OS === 'android' ? 'white' : Colors.secondaryColor,
    },
});

const HomeStack = createStackNavigator({
    Tabs: TabNavigator,
}, {
    defaultNavigationOptions: {
        headerStyle: {
            backgroundColor: Platform.OS === 'android' ? Colors.headerColor : 'white',
        },
        headerTintColor: Platform.OS === 'android' ? 'white' : Colors.secondaryColor,
    },
});

const AppNavigator = createSwitchNavigator({
    Auth: FeedStack,
    Home: HomeStack,
}, {
    defaultNavigationOptions: {
        headerStyle: {
            backgroundColor: Platform.OS === 'android' ? Colors.headerColor : 'white',
        },
        headerTintColor: Platform.OS === 'android' ? 'white' : Colors.secondaryColor,
    },
});

export default createAppContainer(AppNavigator);

Screen.js

DailyTaskScreen.navigationOptions = {
    headerTitle: 'Daily Task',
    headerRight: (
        <HeaderButtons HeaderButtonComponent={HeaderButton}>
            <Item
                title='Category'
                iconName='md-albums'
                onPress={() => {
                    this.props.navigation.navigate('SelectCategory')
                }}
            />
        </HeaderButtons>
    )
};

我需要做什么才能获得能够编辑 navigationOptions 的预期结果？

标签： javascriptreactjsreact-native

解决方案

要在标题右侧添加一个元素并在 onPress 上实现它，您可以这样做：

只需在要添加它的屏幕的 js 文件中的“导出默认类”下方添加此代码。

static navigationOptions = {
    headerLeft: null,
    headerRight: (
        <TouchableOpacity
            onPress={() => alert('This is a button!')}>
            <Text style={{color: '#fff', marginRight:12, fontSize: 14}}>Done</Text>
        </TouchableOpacity>
    )
};

推荐阅读