将本机导航响应到底部选项卡栏屏幕中的外部选项卡

Question

我有一个问题，我不知道如何从底部选项卡栏中的屏幕导航，如下所示：

default: createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name="ios-home" size={24} color={tintColor} />
}
},
Message: {
screen: MessageScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name="ios-chatboxes" size={24} color={tintColor} />,
OtherUser: { screen: OtherUserScreen }
}
},
Post: {
screen: PostScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name="ios-add-circle" size={48} color={"#4cdd75"} style={{
shadowColor: "#4cdd75",
shadowOffset: {
width: 0,
height: 0
},
shadowRadius: 10,
shadowOpacity: 0.3
}} />
}
},
Notification: {
screen: NotificationScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name="ios-notifications" size={24} color={tintColor} />
}
},
Profile: {
screen: ProfileScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name="ios-person" size={24} color={tintColor} />
}
}
}

createSwitchNavigator 组件如下所示：

export default createAppContainer(
createSwitchNavigator(
{
Loading: LoadingScreen,
App: AppContainer,
Auth: AuthStack,
OtherUser: OtherUserScreen
},
{
initialRouteName: 'Loading'
}
)
);

AppContainer 是底部选项卡导航器屏幕设置。 此外，我从消息屏幕中的导航如下所示：

const { navigate } = this.props.navigation;
...
onPress={() => navigate('OtherUser')}

在此消息屏幕中，我想导航到"其他用户"屏幕，以便仍然显示底部选项卡导航器。目前，导航导航到"其他用户"屏幕，但底部选项卡导航器消失。当我尝试在我的其他用户屏幕中使用后退按钮代码导航时，如下所示：

onPress={() => navigate("MessageScreen")}

不显示任何内容。是否可以以任何方式在不删除底部选项卡栏且不向其添加其他组件的情况下无缝地从消息屏幕导航到其他用户屏幕？

Answer 1

据我所知，你想做的事情是错误的。 底部栏消失是有道理的，因为您使用 SwitchNavigator 在"AppContainer"和"OtherUser"之间导航。

因此，当您导航到"其他用户"的那一刻，您不再处于底部菜单导航中，您只是在SwitchNavigator中！

为了能够做你想做的事情，你应该集成一个stackNavigator而不是MessageScreen。 然后在这个堆栈导航器中，你集成了你的消息屏幕以及其他用户

目前，您的导航似乎是这样的：

- Loading
- App
-- bottomTabMenu
-- Home
-- Message
-- Posts
-- Notifications
-- Profile
- Auth
- OtherUser

因此，如您所见，当您转到"OtherUser"时，您不再处于BottomMenu导航中，除此之外，您无法返回，因为实际上，要使用后退按钮返回，您需要在堆栈导航中。

因此，如果您希望能够从 messageScreen 转到用户配置文件，则需要将其包装在导航堆栈中，并将此堆栈集成到您的 bottomMenu 中。

然后，您的导航应如下所示：

- Loading
- App
-- bottomTabMenu
-- Home
-- Message
-- Stack Navigation
-- Message Screen (defaultRoute)
-- OtherUser Screen
-- Posts
-- Notifications
-- Profile
- Auth

所以你的代码将是这样的：

const MessageStack = createStackNavigator(
{
Message: MessageScreen,
OtherUser: OtherUserScreen
},
{
initialRouteName: "Message"
}
)
default: createBottomTabNavigator(
{
...
Message: {
screen: MessageStack,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name="ios-chatboxes" size={24} color={tintColor} />,
OtherUser: { screen: OtherUserScreen } //Delete this line, the navigationOptions are only used to define styles or behaviors on the navigation.
}
},
...
}

我希望我理解这个问题，这个答案会对你有所帮助！

维克多