Question

我有嵌套导航，这似乎使我无法管理每个页面的标题，标题和后退选项。我正在使用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”受到影响，但也没有运气。

Answer 1

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

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

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

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

反应本机设置标题标题和后退按钮

1 个答案: