在 BottomTabBar 屏幕中将本机导航反应到外部选项卡

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')}

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

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

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

Answer 1

据我所知，您的尝试是错误的。 bottomBar 消失是有道理的，因为您使用 SwitchNavigator 在 "AppContainer" 和 "OtherUser" 之间导航。

因此当您导航至 "OtherUser" 时，您不再处于 bottomMenu 导航中，您只是处于 SwitchNavigator 中！

为了能够做你想做的事，你应该集成一个stackNavigator而不是MessageScreen，然后在这个 StackNavigator 中，集成 MessageScreen 和 OtherUser

目前你的导航是这样的：


- 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.
          }
        },
        ...
      }

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

维克多

在 BottomTabBar 屏幕中将本机导航反应到外部选项卡

React Native Navigation To External Tab Within BottomTabBar Screen

react-native

react-native-navigation