React-Navigation 3: Ouvrez modal avec createBottomTabNavigator et createStackNavigator

Vous pouvez tout envelopper dans le même StackNavigator, de cette façon, vous pouvez naviguer facilement vers d'autres itinéraires. Ici, je passe le screen3 comme route par défaut, mais vous pouvez le changer comme vous le souhaitez.

import React, { Component, } from 'react';
import { createBottomTabNavigator, createStackNavigator, createAppContainer, } from 'react-navigation';
import { Screen1, Screen2, Screen3, Screen4, Screen5 } from './screens';

const TabNavigator = createBottomTabNavigator({
  screen1: { screen: Screen1, },
  screen2: { screen: Screen2, },
  screen3: { screen: () => null, }, //this.props.navigation.navigate('screen3Modal')
  screen4: { screen: Screen4, },
  screen5: { screen: Screen5, },
});

const StackNavigator = createStackNavigator({
  Home: { screen: TabNavigator },
  screen3Modal: { screen: Screen3, },
},
{
  initialRouteName: 'screen3Modal',
});

const StackNavigatorContainer = createAppContainer(StackNavigator);

export default class App extends Component {
  render() {
    return <StackNavigatorContainer />;
  }
}

J'ai trouvé une solution relativement simple: Cachez la barre de navigation d'origine avec display:"none"

<View style={{ flexDirection: "row", height: 50, justifyContent: "space-evenly", alignItems: "center", width: "100%" }}>
  <TouchableOpacity onPress={() => this.props.navigation.navigate("screen1")}><Text>1</Text></TouchableOpacity>
  <TouchableOpacity onPress={() => this.props.navigation.navigate("screen2")}><Text>2</Text></TouchableOpacity>
  <TouchableOpacity onPress={() => this.props.navigation.navigate("screen3")}><Text>3</Text></TouchableOpacity>
  <TouchableOpacity onPress={() => this.props.navigation.navigate("screen4")}><Text>4</Text></TouchableOpacity>
  <TouchableOpacity onPress={() => this.props.navigation.navigate("screen5")}><Text>5</Text></TouchableOpacity>
</View>

Et créez une nouvelle barre de navigation sur chaque écran

const TabNavigator = createBottomTabNavigator(
  {
    screen1: Screen1,
    screen2: Screen2,
    screen4: Screen4,
    screen5: Screen5,
  }, {
    tabBarOptions: {
      style: { display: "none", }
    }
  },
);

const StackNavigator = createStackNavigator(
  {
    Home: TabNavigator,
    screen3: Screen3
  }, {
    mode: 'modal',
  }
)

export default createAppContainer(StackNavigator);

Eh bien, j'ai passé des heures et des heures à résoudre ce problème.

Voici une solution entièrement fonctionnelle et testée:

1. Configurez votre conteneur d'applications en incluant la pile d'onglets et à ouvrir la pile de navigation modale:

  NavigationService.navigate(action.payload);

2. Créez un conteneur d'application avec cette pile d'onglets par ceci a > guide

3. Dans le TabNavigator dans le createBottomTabNavigator retournez le composant nul pour l'onglet spécifique (screen3) (pour désactiver la navigation par react-navigator) et gérez l'onglet manuellement dans defaultNavigationOptions en créant un composant personnalisé pour celui-ci.

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

4. Gérez le clic manuellement dans un composant d'onglet personnalisé Screen3Tab avec TouchableWithoutFeedback & onPress. À l'intérieur du composant Screen3Tab:

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

5. Une fois que vous avez détecté l'événement redux de répartition onPress

  const TabNavigator = createBottomTabNavigator({
    screen1: Screen1Navigator,
    screen2: Screen2Navigator,
    screen3: () => null,
    screen4: Screen4Navigator,
    screen5: Screen5Navigator,
}
    defaultNavigationOptions: ({ navigation }) => ({
      mode: 'modal',
      header: null,
      tabBarIcon: ({ focused }) => {
        const { routeName } = navigation.state;
        if (routeName === 'screen3') {
          return <Screen3Tab isFocused={focused} />;
        }
      },
    }),

6. Gérez l'événement distribué à l'aide du Service de navigation . J'utilise redux-saga pour cela

  const FinalTabsStack = createStackNavigator(
    {
      tabs: TabNavigator,
      screen1: Screen1Navigator,
    }, {
      mode: 'modal',
    }
  )

Un peu compliqué mais ça marche.

J'ai trouvé une meilleure solution basée sur ce github problème . Il vous suffit d'ajouter dans la configuration de l'onglet spécifique, dans votre cas screen3 l'événement navigationOptions (vous l'aviez déjà), vous étiez assez proche, mais, vous deviez recevoir la navigation en paramètre, car il n'y a pas de contexte pour ceci pendant que vous l'utilisiez. Pour corriger le premier code que vous avez écrit, je le changerais en ceci et cela fonctionnerait:

navigationOptions: ({ navigation }) => ({
  tabBarOnPress: ({ navigation }) => {
    navigation.navigate("screen3Modal");
  }
})

ce qui peut être fait est d'empêcher l'action par défaut de l'événement de presse d'onglet et de naviguer vers l'écran souhaité avec l'animation souhaitée.

Dans mon cas, je voulais ouvrir un modal sous iOS dans un style de présentation qui provenait d'iOS 13. ce que j'ai fait a été d'empêcher l'action par défaut comme ci-dessous

    import { createStackNavigator, TransitionPresets } from '@react-navigation/stack'

'modelscreen' utilisé dans le code ci-dessus provient d'une pile de navigation qui ressemble à ci-dessous. Le navigateur d'onglets pour Tab.Screen dans le code ci-dessus est l'un des écrans de otherstacknavigation qui est utilisé dans la navigation ci-dessous.

const MainStack = ({ initialRoute }) => {
  return (
      <Stack.Navigator 
            initialRouteName="otherstacknavigation" 
            screenOptions={{
                headerShown: false,
                gestureEnabled: true,
                cardOverlayEnabled: true,
                ...TransitionPresets.ModalPresentationIOS
            }}>
        <Stack.Screen name='modalscreen' 
                      component={modalscreen}
                      options={{
                          headerShown: false
                      }} />
        <Stack.Screen name='otherstacknavigation' 
                      component={otherstacknavigation}
                      initialParams={{ initialRoute: initialRoute }}/>
      </Stack.Navigator>
  );
}

export default MainStack;

vous pouvez importer des TransitionPresets comme ci-dessous;

   <Tab.Screen name="screen1" 
    component={ EmptyScreen } // empty screen becuase I want nothing to present here so it was a component that returns null which is given bellow   
    listeners={({ navigation, route }) => ({
      tabPress: e => {
        e.preventDefault();
        navigation.navigate('modalscreen');
      },
    })} />


const EmptyScreen = () => {
  return null
}

Donc, dans mon cas, j'ai le premier navigateur de pile principale qui est MainStack ci-dessus. Il a un autre navigateur de pile qui est une autre navigation de pile au-dessus de MainStack. Cette autre navigation a un écran dont le composant est le navigateur d'onglets. et Tab. L'écran dans le code ci-dessus provient de ce navigateur d'onglets. Maintenant, à partir de l'un des onglets de ce navigateur d'onglets, je navigue vers 'modelscreen' qui se trouve dans MainStack. J'ai dû créer ce navigateur MainStack juste pour obtenir ces fonctionnalités, sinon mon code commencerait à partir d'une autre navigation. Parce que ModalPresentationIOS ne peut être appliqué qu'au niveau de la pile et non au niveau de l'écran.

J'utilise react-navigation-5. * Et je pense qu'il a répondu à plusieurs questions qui peuvent survenir dans une telle situation.