React Native 设置 header 标题和后退按钮

Question

我有嵌套导航，这似乎妨碍了我管理 header、每个页面上的标题和返回选项。我正在使用 react-navigation 4.x.

我在 AppNavigator 上有以下项目，首先是抽屉：

const DashboardDrawerAgent = createDrawerNavigator(
    {
        DashboardScreenAgent: {
            screen: DashboardScreenAgent,
        },
        ContactsScreen: {
            screen: ContactsScreen,
        },
        ContactGlobalFormScreen: {
            screen: ContactGlobalFormScreen,
        },
})

然后我有一个 Stack，混合了一个屏幕和抽屉：

const InvestorStack = createStackNavigator({
    SelectProfileScreen: {
        screen: SelectProfileScreen,
    },
    DashboardDrawerInvestor: {
        screen: DashboardDrawerInvestor,
    }
}, {
    initialRouteName: 'DashboardDrawerInvestor',
})

然后我使用 SwitchNavigator:

const AppNavigator = createSwitchNavigator({
        GuestStack: {
            screen: GuestStack
        },
        WelcomeStack: {
            screen: WelcomeStack
        },
        InvestorStack: {
            screen: InvestorStack,
        }
    }, {
        initialRouteName: 'GuestStack',
        headerMode: 'none'
    });

export default createAppContainer(AppNavigator);

Drawer 需要一个组件来列出菜单项，在每个菜单项上，方法“navigateToScreen”用于打开下一个屏幕：

navigateToScreen = ( route ) =>(
        () => {
            const navigateAction = NavigationActions.navigate({
                routeName: route
            });
            this.props.navigation.dispatch(navigateAction);
        }
    )

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={[
                    styles.menuItem
                ]} onPress={this.navigateToScreen("ProfileStack")}>
                    <Text style={[
                        styles.menuItemText 
                    ]}>My Profile</Text>
                </TouchableOpacity>

                <TouchableOpacity style={[
                    styles.menuItem
                ]} onPress={this.navigateToScreen("ContactsScreen")}>
                    <Text style={[
                        styles.menuItemText 
                    ]}>Contacts</Text>
                </TouchableOpacity>
             </View>
          )
      }

我希望能够在特定屏幕上设置标题、隐藏header、show/hide后退按钮，但是我做不到，不确定这个嵌套结构是不是blocking/overriding一些配置。

我已经在每个屏幕上、每个堆栈上都尝试过“navigationOptions”，但是 id 不起作用，有什么想法吗？

我也试过直接从按钮直接调用特定屏幕（属于抽屉），以防“navigateToScreen”受到影响，但也没有成功。

Answer 1

解决方案是将联系人列表和联系人表单屏幕移动到它自己的堆栈中：ContactStack：

const ContactStack = createStackNavigator({
    ContactsScreen: {
        screen: ContactsScreen,
    },
    ContactGlobalFormScreen: {
        screen: ContactGlobalFormScreen
    }
}, {
    initialRouteName: 'ContactsScreen',
});

然后在抽屉和左侧边栏中使用它：

const DashboardDrawerInvestor = createDrawerNavigator(
    {
        ...
        ContactStack: {
            screen: ContactStack,
        },
    })

React Native 设置 header 标题和后退按钮

React Native setting header title and back button

react-native

react-navigation

react-navigation-drawer

react-navigation-stack