web-dev-qa-db-fra.com

React Accessoires de passe de navigation dans TabNavigator

J'ai des accessoires qui sont chargés depuis le serveur sur l'écran initial. Je veux les passer au reste des écrans d'onglets. Cependant, je n'ai trouvé aucun exemple en ligne. Je connais screenProps, mais je n'ai aucune idée de comment le configurer. Toutes les méthodes que j'ai essayées ont entraîné des erreurs.

const EProj = TabNavigator({
  Home: { screen: HomeScreen },
  Map: { screen: MapG },
  Login: { screen: Login },
  Profile: { screen: Profile },
}, {
  tabBarPosition: 'bottom',
  animationEnabled: true,
  tabBarOptions: {
    activeTintColor: '#1abc9c',
  },
});

Ceci est ma configuration d'écran. Où dois-je placer les screenProps?

<EProj
  screenProps={cats}
/>

Tout bon exemple de configuration serait utile. Merci d'avance.

Configuration de HomeScreen:

class HomeScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Home',
  };

...

  componentWillMount(){
    console.log("Starting to load assets from server!");
    this.onLoadCats(); /*starts asset loading*/
  }

  render() {
    return (
      <View style={styles.container}>

        <Text>Welcome to alpha 1.17 This is hard system test.</Text>
        <AssetsLoad catsL={this.state.catsL} />
      </View>
    );
  }
}
javascriptandroidreact-nativereact-navigation
12
GhostPengy

Ce que vous pouvez faire est de créer un composant d'ordre supérieur qui peut retourner la navigation, et dans le componentDidMount de ce composant, vous pouvez charger les données et les passer par screenProps.

Exemple

const EProj = TabNavigator({
  Home: { screen: HomeScreen },
  Map: { screen: MapG },
  Login: { screen: Login },
  Profile: { screen: Profile },
}, {
  tabBarPosition: 'bottom',
  animationEnabled: true,
  tabBarOptions: {
    activeTintColor: '#1abc9c',
  },
});

class MainNavigation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {cats: []};
  }
  componentDidMount() {
    this.onLoadCats().then((cats) => this.setState({ cats: cats }));
  }
  render() {
    return(<EProj screenProps={{ cats: this.state.cats}} />
  }
}

// Now you can do in your screens
console.log(this.props.screenProps.cats);

/* This is next line is wrong, please check update above */ 
/* console.log(this.props.navigation.state.params.cats); */
24
bennygenel