React Navigation v3 Modal не работает с createBottomTabNavigator

Question

React Navigation v3 Modal не работает с createBottomTabNavigator и не уверен, почему. Тем не менее, headerMode: 'none', кажется, работает, но mode: 'modal' не отображается как модальный.

const Addpicture = createStackNavigator(
  {
    Addpicture: {
      screen: Addpicture
    }
  },
  {
    mode: 'modal', // This does NOT work
    headerMode: 'none' // But this works
  }
);

const Navigator =  createBottomTabNavigator(
  {
    'My Interviews': {
      screen: MyDatesStack
    },
    'Add Interview': {
      screen: AddDateStack
    },
    'Companies': {
      screen: CompaniesStack
    }
  }
);

export default createAppContainer(Navigator);

Answer 1

Действительно, это не сработает, что бы я ни пытался.

Я решил эту проблему, выполнив следующие действия. Допустим, вы хотите открыть модальный режим при нажатии вкладки NewModal.

1. Настройте контейнер приложения, включив стек вкладок и открыв модальный стек навигации:

  const FinalTabsStack = createStackNavigator(
    {
      Home: TabNavigator,
      NewModal: NewModalNavigator
    }, {
      mode: 'modal',
    }
  )

2. Создание контейнера приложения с этим стеком вкладок для этого руководства

3. Внутри TabNavigator в createBottomTabNavigator возвращаемом нулевом компоненте для конкретной вкладки (NewModal) (для отключения навигации по реагирующему навигатору)

  const TabNavigator = createBottomTabNavigator({
    Feed: FeedNavigator,
    Search: SearchNavigator,
    NewModal: () => null,
    Chat: ChatNavigator,
    MyAccount: MyAccountNavigator,
}
    defaultNavigationOptions: ({ navigation }) => ({
      mode: 'modal',
      header: null,
      tabBarIcon: ({ focused }) => {
        const { routeName } = navigation.state;
        if (routeName === 'NewModal') {
          return <NewModalTab isFocused={focused} />;
        }
      },
    }),

4. Обрабатывать щелчок вручную внутри пользовательского компонента вкладки NewModalTab с помощью TouchableWithoutFeedback & onPress. Внутри компонента NewModalTab:

  <TouchableWithoutFeedback onPress={this.onPress}>
    <Your custom tab component here />
  </TouchableWithoutFeedback>

5. Как только вы поймаете событие редукции отправки onPress

  onPress = () => {
    this.props.dispatch({ type: 'NAVIGATION_NAVIGATE', payload: {
      key: 'NewModalNavigator',
      routeName: 'NewSelfieNavigator',
    }})
  }

6. Обработка отправленного события с использованием Служба навигации . Я использую redux-saga для этого

  NavigationService.navigate(action.payload);

Немного сложно, но работает.