React Native 设置标题标题和后退按钮答案

【问题标题】：React Native setting header title and back buttonReact Native 设置标题标题和后退按钮
【发布时间】：2020-11-23 23:20:28
【问题描述】：

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

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

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

然后我有一个堆栈，混合一个屏幕和抽屉：

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);

抽屉需要一个组件来列出菜单项，在每个菜单项上，方法“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>
          )
      }

我希望能够在特定屏幕上设置标题、隐藏标题、显示/隐藏后退按钮，但我不能，不确定这个嵌套结构是否会阻止/覆盖某些配置。

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

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

【问题讨论】：

标签： react-native react-navigation react-navigation-stack react-navigation-drawer

【解决方案1】：

解决方案是将联系人列表和联系人表单屏幕移至其自己的堆栈：ContactStack：

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

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

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

【讨论】：