Passer les accessoires à un Tabnavigator imbriqué

Question

Je travaille avec reac native depuis 3 mois maintenant et j'ai ce problème maintenant pendant plusieurs jours sans aucune solution.

Le problème: J'ai un TabNavigator imbriqué dans un StackNavigator. Ces deux navigateurs sont à l'intérieur d'un composant sans état:

const MyStackNav = StackNavigator({ 
    Tabs:{ 
    screen: TabNavigator({ 
     Tab1: { screen: TabScreen1}, 
     Tab2: { screen: TabScreen2}, 
     Tab3: { screen: TabScreen3}, 
     ...(CONDITION ? { Tab4: { 
      screen: TabScreen4 
     }} : {}) 
     }) 
    } 
    StackScreen1:{ 
    screen: StackScreenOne, 
    }, 
    StackScreen2:{ 
    screen: StackScreenTwo, 
    }, 
}) 

Appel du composant:

class MainApp extends React.Component { 

    constructor(props) 
    { 
    super(props); 

    this.state = { 
     condition: false, 
    }; 
    } 

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

Comment puis-je passer la condition de ma classe MainApp à la variable d'état à l'intérieur du composant MyNavStack pour le conditionnel le rendu? Donc Tab4 ne devrait être rendu que si CONDITION est vrai. La deuxième question serait: Comment puis-je passer un accessoire de ma classe MainApp à, par exemple, l'écran du premier onglet?

Merci d'avance!

Answer 1

Vous pouvez vous donner MyStackNav une propriété comme: <MyStackNav condition={this.state.condition} />

Dans le MyStackNav on pourrait dire:

const MyStackNav = props => StackNavigator({ 
    Tabs:{ 
    screen: TabNavigator({ 
     Tab1: { screen: TabScreen1}, 
     Tab2: { screen: TabScreen2}, 
     Tab3: { screen: TabScreen3}, 
     ...(props.condition? { Tab4: { 
      screen: TabScreen4 
     }} : {}) 
     }) 
    } 
    StackScreen1:{ 
    screen: StackScreenOne, 
    }, 
    StackScreen2:{ 
    screen: StackScreenTwo, 
    }, 
}) 

Vous n'avez pas besoin de créer un React.component, pour transmettre des accessoires.

Vous pouvez également étendre un peu, au cas où vous souhaitez faire un peu plus dans votre composant:

const MyStackNav = (props) => { 
     const { condition } = props; 
     return StackNavigator({ 
      Tabs: { 
       screen: TabNavigator({ 
        Tab1: { 
         screen: TabScreen1 
        }, 
        Tab2: { 
         screen: TabScreen2 
        }, 
        Tab3: { 
         screen: TabScreen3 
        }, 
        ...(condition ? { 
         Tab4: { 
          screen: TabScreen4 
         } 
        } : {}) 
       }) 
      } 
      StackScreen1: { 
       screen: StackScreenOne, 
      }, 
      StackScreen2: { 
       screen: StackScreenTwo, 
      }, 
     }) 
}