Question

我遇到一个问题，我不知道如何从底部标签栏中的屏幕导航，如下所示：

id

createSwitchNavigator组件如下所示：

grp

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

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} />
          }
        }
      }

从此消息屏幕，我想导航至OtherUser屏幕，以便仍显示底部的标签导航器。当前，导航导航到OtherUser屏幕，但是底部的标签导航器消失了。当我尝试在OtherUser屏幕上使用后退按钮代码导航时，如下所示：

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

未显示任何内容。在不删除底部标签栏且不添加其他组件的情况下，是否可以通过任何方式使从消息屏幕到另一个用户屏幕的导航变得流畅？

Answer 1

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

因此，当您导航到“ 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屏幕中的外部选项卡反应本机导航

1 个答案: