web-dev-qa-db-fra.com

Utilisation du fichier navigation.navigate dans un createMaterialTopTabNavigator

J'ai commencé un peu avec react-native, et j'essaie de créer une application "hello Word" pour voir comment cela fonctionne ... J'ai créé un menu avec "onglet" en haut de mon écran.

Dans le fichier app.js, j'ajoute createStackNavigator pour définir mes itinéraires App.js

import { ... }
const AppNavigator = createStackNavigator({     
    Main: { screen: Main},
    CScreen: {screen: FormCScreen},
});

type Props = {};
export default class App extends Component<Props> {
render() {
    return (
        <AppNavigator />    
    );
  }
}

Ceci est mon écran main, où je règle les onglets.

Main.js

imports {AScreen, BScreen} ...
const Tab = createMaterialTopTabNavigator(
{
   A: AScreen,
   B: BScreen,
},
{
  tabBarPosition: 'top',

});

export default class Main extends Component {

render() {
    return (  
      <Tab/>
    );
  }
}

BScreen.js

Maintenant, sur l’un de mes onglets BScreen, je veux cliquer sur un bouton, où j’espère que cela chargera l’écran (CScreen)

imports ...
export default class BScreenextends Component{

    render(){
        return(
            <View>
               <TouchableHighlight onPress={() => this.props.navigation.navigate('CScreen')}>
                <Text>Click here to open CScreen</Text>
                   </TouchableHighlight>
            </View>
        );
    }
}

Il peut rendre tous les composants correctement, le seul problème est que lorsque je clique sur le bouton pour afficher le CScreen, rien ne se passe .. C'est comme si je chargeais l'onglet J'ai perdu l'instacia de mon navigateur.

Main
 Tab 
 A
 B Button (Open CScreen) ~> this is not working

Comment puis-je ouvrir l'écran via un bouton à l'intérieur d'un onglet?

[EDIT] Console.log ScreenB

https://imgur.com/a/teAzpn5

javascriptreact-nativereact-routerreact-navigation
7
Emiry Mirella

Je pense que vous essayez d’atteindre le mode de configuration de navigation StacksOverTabs,

L’erreur que vous avez commise est que Main screen est un composant normal dans lequel vous avez rendu le composant Onglet, c’est-à-dire createMaterialTopTabNavigator. Par conséquent, le composant Onglet n’obtiendra pas le bon accessoire de navigation de StackNavigator

Au lieu de cela, vous devez faire Main écran lui-même un createMaterialTopTabNavigator.

Par exemple,

 const AppNavigator = createStackNavigator({     
     Main: { screen: MainTab}, // MainTab is itself a TabNavigator now
     CScreen: {screen: FormCScreen},
 });

 const MainTab = createMaterialTopTabNavigator(
   {
      A: AScreen,
      B: BScreen,
   },
   {
     tabBarPosition: 'top',

   });
 );

Découvrez les exemples de code officiels dans GitHub, dans lesquels vous pouvez naviguer vers StacksOverTabs.

https://github.com/react-navigation/react-navigation/tree/master/examples/NavigationPlayground/js

Merci.

4
Ravi Raj

Vous auriez également pu le placer en haut de votre classe d’application, je crois:

static router = AppNavigator.router;

Il y a plus d'informations ici: https://reactnavigation.org/docs/en/common-mistakes.html#explicitly-rendering-more-than-one-navigator

1
Varun Singh