Реагировать на встроенную навигацию на вкладке «Внешний» на экране BottomTabBar - PullRequest
Новая
       4

Реагировать на встроенную навигацию на вкладке «Внешний» на экране BottomTabBar

0 голосов
/ 23 января 2020

У меня есть проблема, из-за которой я не знаю, как перемещаться по экрану в нижней панели вкладок, которая выглядит следующим образом: 

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, но навигатор нижней вкладки исчезает. И когда я пытаюсь использовать навигацию кода кнопки «Назад» на экране «Другой пользователь», который выглядит следующим образом: 

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

Ничего не отображается. Можно ли каким-либо образом добиться перехода от экрана сообщений к экрану другого пользователя без удаления нижней панели вкладок и без добавления к ней другого компонента?

1 Ответ

0 голосов
/ 23 января 2020

Из того, что я вижу, вы пытаетесь сделать неправильно. Имеет смысл, что bottomBar исчезает, потому что вы используете SwitchNavigator для перемещения между «AppContainer» и «OtherUser».

Таким образом, когда вы переходите к «OtherUser», вы больше не находитесь в навигации bottomMenu, вы просто в SwitchNavigator!

Чтобы иметь возможность делать то, что вы хотите, вы должны интегрировать stackNavigator вместо MessageScreen, затем в этом StackNavigator вы интегрируете свой MessageScreen, а также OtherUser

В настоящее время ваша навигация выглядит следующим образом: 


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

Итак, как вы видите, когда вы go обращаетесь к «OtherUser», вы больше не находитесь в навигации BottomMenu, кроме того, вы не можете go назад, потому что на самом деле, чтобы иметь возможность go назад с помощью кнопки «назад», вы должны быть в стеке навигации.

Так что если вы хотите иметь возможность go в профиль пользователя из ваш экран сообщений, вам нужно обернуть его в стек навигации и интегрировать этот стек в ваше bottomMenu.

Ваша навигация должна n выглядит примерно так: 


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

Надеюсь, я понял вопрос и этот ответ поможет вам!

Виктор

...