web-dev-qa-db-fra.com

Comment créer un bouton TabNavigator Appuyez sur un écran modal avec React Navigation

En utilisant le React Navigateur de l'onglet de navigation https://reactnavigation.org/docs/navigators/tab comment faire un des boutons de l'onglet Poussez l'écran vers le haut comme modal plein écran? Je vois que le navigateur de pile a un mode=modal option. comment utiliser ce mode lorsque je clique sur le bouton de l'onglet TakePhoto? Cliquer dessus affiche toujours la barre d'onglets en bas.

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  TakePhoto: {
    screen: PhotoPickerScreen, // how can I have this screen show up as a full screen modal?
  },
});
react-nativereact-navigation
15
MonkeyBonkey

En fait, il n'y a pas de support dans react-navigation pour changer le mode de présentation à la volée de default à modal (voir la discussion à ce sujet ici ). J'ai rencontré le même problème et l'ai résolu en utilisant un StackNavigator très haut avec headerMode réglé sur none et mode réglé sur modal :

const MainTabNavigator = TabNavigator(
    {
        Tab1Home: { screen: Tab1Screen },
        Tab2Home: { screen: Tab2Screen }
    }
);

const LoginRegisterStackNavigator = StackNavigator({
    Login: { screen: LoginScreen }
});

const ModalStackNavigator = StackNavigator({
    MainTabNavigator:          { screen: MainTabNavigator            },
    LoginScreenStackNavigator: { screen: LoginRegisterStackNavigator }
}, {
    headerMode: 'none',
    mode:       'modal'
});

Cela me permet de faire ce qui suit (en utilisant redux) dans Tab1Screen et Tab2Screen pour afficher la vue modale où je veux:

this.props.navigation.navigate('LoginScreenStackNavigator');
20
Thomas Kekeisen

Je ne sais pas si cela est toujours pertinent pour vous, mais j'ai réussi à trouver un moyen d'y parvenir.

J'ai donc réussi à le faire fonctionner en utilisant tabBarComponent dans tabNavigatorConifg, vous pouvez empêcher la navigation par onglets de naviguer en fonction de l'index.

   tabBarComponent: ({jumpToIndex, ...props, navigation}) => (
        <TabBarBottom
            {...props}
            jumpToIndex={index => {
                if (index === 2) {
                    navigation.navigate('camera')
                }
                else {
                    jumpToIndex(index)
                }
            }}
        />

    )

Une fois que vous avez fait cela, ma méthode pour afficher la vue de façon modale au-dessus des vues de tabulation consistait à placer le tabnavigator à l'intérieur d'un stacknavigatior, puis à naviguer vers un nouvel écran à l'intérieur du stacknavigator.

10
TomTom

react-navigation Dans bottomTabNavigator a une option de navigation tabBarOnPress que vous pouvez utiliser pour remplacer les pressions de tabulation:

https://reactnavigation.org/docs/en/bottom-tab-navigator.html#tabbaronpress

const AppContainer = createStackNavigator(
  {
    default: createBottomTabNavigator(
      {
        TAB_0: Stack0,
        TAB_1: Stack1,
        TAB_2: Stack2,
        TAB_3: View // plain rn-view, or any old unused screen
      },
      {
        defaultNavigationOptions: {
          // other tab navigation options...
          tabBarOnPress: ({ navigation, defaultHandler }) => {
            if (navigation.state.key === 'TAB_3') {
              navigation.navigate('tabToOpenAsModal');
            } else {
              defaultHandler();
            }
          }
        }
      }
    ),
    tabToOpenAsModal: {
      screen: TabToOpenAsModalScreen
    }
  },
  {
    mode: 'modal',
    headerMode: 'none'
  }
);

Si vous imbriquez votre navigateur d'onglets dans un navigateur de pile avec un modal, vous pouvez l'ouvrir lorsque vous appuyez sur le bouton de la barre d'onglets. Étant donné que le modal a été ouvert et non l'onglet, lorsque le modal est fermé, l'application revient à l'écran qui était visible avant d'appuyer sur l'onglet modal.

1
cjpete

Une façon d'éliminer la barre d'onglets consiste à masquer la barre d'onglets avec visible: false:

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  TakePhoto: {
    screen: PhotoPickerScreen,
    navigationOptions: {
      tabBar: {
        visible: false,
      },
    },
  },
});

Cependant, cela ne semble pas déclencher de transition vers le plein écran, ce qui, je suppose, est souhaité?

Une autre option pourrait être d'envelopper PhotoPickerScreen dans un nouveau StackNavigator et de définir ce navigateur sur mode = 'modal'.

Vous devrez peut-être déclencher la navigation vers ce modal depuis onPress sur l'onglet tab (par exemple. navigation.navigate('TakePhoto').)

Remarque, j'essaie de comprendre comment structurer au mieux la navigation moi-même, alors…

La troisième option, implémenter un StackNavigator en tant que parent, puis ajouter le MyApp TabNavigator comme première route à l'intérieur de celui-ci, pourrait être la solution la plus flexible. L'écran TakePhoto serait alors au même niveau que le TabNavigator, vous permettant de l'acheminer de n'importe où.

Intéressé d'entendre ce que vous proposez!

1
Björn