web-dev-qa-db-fra.com

Comment passer des accessoires au composant à l'intérieur d'un navigateur de navigation React?

J'essaie de passer des accessoires à un composant qui a été encapsulé via un appel à create...Navigator appeler, c'est-à-dire.

// Search.js
const Navigator = createMaterialTopTabNavigator({
    Wines,
    Stores,
    Vineyards,
    Restaurants
});

// Somewhere in render()...
<Navigator />

J'essaie de comprendre comment passer des paramètres aux composants Wines/Stores/etc. à partir du composant Search (ci-dessus). J'ai lire la documentation et apparemment, cela peut être fait facilement avec navigation.navigate en passant un objet, mais je ne sais pas comment le faire avec cette méthode particulière. Puis-je avoir une aide s'il vous plait?

javascriptreactjsreact-nativereact-native-androidreact-navigation
11
James Ko

Votre exemple est un peu vague alors j'essaie d'expliquer autant que possible.

Il y a 2 façons différentes de passer des propriétés aux écrans (sauf implémentation redux).

1) navigate action

Vous pouvez passer des paramètres à l'écran parcouru en passant l'argument params à l'écran.

navigation.navigate ({routeName, params, action, key}) OR navigation.navigate (routeName, params, action)

routeName - Un routeName de destination qui a été enregistré quelque part dans le routeur de l'application

params - Paramètres à fusionner dans l'itinéraire de destination

action advanced) La sous-action à exécuter dans le routeur enfant, si l'écran est un navigateur. Voir le document Actions Doc pour une liste complète des actions prises en charge.

clé - Identificateur facultatif de l'itinéraire à parcourir. Revenez à cette route, si elle existe déjà

Échantillon 

this.props.navigate('Profile', { name: 'Brent' })

2) --- (screenProps

Vous pouvez passer un paramètre global à la navigation qui peut être disponible dans chaque écran pour cette navigation.

screenProps - Transmettre des options supplémentaires aux écrans enfants

Échantillon 

const SomeStack = createStackNavigator({
  // config
});

<SomeStack
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

J'ai créé un petit exemple d'application que je suppose que vous essayez de réaliser.

const Tab = ({name, searchValue}) => (
  <View style={styles.tabContainer}>
    <Text>{name}</Text>
    <Text>{`Searching: ${searchValue || '...'}`}</Text>
  </View>
);

const Wines = (props) => (<Tab name="Wines Page" searchValue={props.screenProps.searchValue} />);
const Stores = (props) => (<Tab name="Stores Page" searchValue={props.screenProps.searchValue} />);
const Vineyards = (props) => (<Tab name="Vineyards Page" searchValue={props.screenProps.searchValue} />);
const Restaurants = (props) => (<Tab name="Restaurants Page" searchValue={props.screenProps.searchValue} />);

const Navigator = createMaterialTopTabNavigator({
    Wines,
    Stores,
    Vineyards,
    Restaurants
});

export default class App extends Component {
  state = {
    text: ''
  }
  changeText = (text) => {
    this.setState({text})
  }
  clearText = () => {
    this.setState({text: ''})
  }
  render() {
    return (
      <View style={styles.container}>
        <SearchBar
          lightTheme
          value={this.state.text}
          onChangeText={this.changeText}
          onClearText={this.clearText}
          placeholder='Type Here...' />
        <Navigator screenProps={{searchValue: this.state.text}} />
      </View>
    );
  }
}
13
bennygenel