webentwicklung-frage-antwort-db.com.de

Wie übergebe ich Requisiten an eine Komponente innerhalb eines React Navigation navigator?

Ich versuche, Requisiten an eine Komponente weiterzuleiten, die durch einen Aufruf von create...Navigator Anruf, d.h.

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

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

Ich versuche herauszufinden, wie Parameter an die Komponenten Wines/Stores/etc. von der Komponente Search (oben) übergeben werden. Ich habe lies die Dokumentation und anscheinend kann dies einfach mit navigation.navigate durch Übergabe eines Objekts, aber ich bin nicht sicher, wie ich es mit dieser bestimmten Methode machen soll. Kann jemand bitte helfen?

11
James Ko

Ihr Beispiel ist ein bisschen vage, deshalb versuche ich, so viel wie möglich zu erklären.

Es gibt 2 verschiedene Möglichkeiten, um Eigenschaften an screens zu übergeben (außer Redux-Implementierung).

1) navigate action

Sie können Parameter an den navigierten Bildschirm übergeben, indem Sie das Argument params an den Bildschirm übergeben.

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

routeName - Ein Ziel routeName, der irgendwo im Router der App registriert wurde

Parameter - Parameter, die in die Zielroute eingefügt werden sollen

action advanced) Die Unteraktion, die im untergeordneten Router ausgeführt werden soll, wenn der Bildschirm ein Navigator ist. Eine vollständige Liste der unterstützten Aktionen finden Sie in der Dokumentation zu Aktionen.

Taste - Optionale Kennung für die Route, zu der navigiert werden soll. Navigieren Sie zu dieser Route zurück, falls diese bereits vorhanden ist

Probe

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

2) --- (screenProps

Sie können der Navigation einen globalen Parameter übergeben, der in jedem Bildschirm für diese Navigation verfügbar sein kann.

screenProps - Übergeben Sie zusätzliche Optionen an untergeordnete Bildschirme

Probe

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

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

Ich habe eine kleine Beispiel-App erstellt, die Sie wahrscheinlich erreichen möchten.

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