Как передать реквизит компоненту в навигаторе React Navigation? - PullRequest
Новая
       6

Как передать реквизит компоненту в навигаторе React Navigation?

0 голосов
/ 20 мая 2018

Я пытаюсь передать реквизиты компоненту, который был обернут через вызов к create...Navigator вызову, т.е. 

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

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

Я пытаюсь выяснить, как передать параметры в Wines / Stores / и т. Д. Из компонента Search (см. Выше).Я прочитал документы и, очевидно, это можно легко сделать с помощью navigation.navigate, передав объект, но я не уверен, как это сделать с этим конкретным методом.Может кто-нибудь помочь, пожалуйста?

1 Ответ

0 голосов
/ 20 мая 2018

Ваш пример немного расплывчатый, поэтому я пытаюсь объяснить как можно больше.

Существует 2 различных способа передачи свойств на экраны (кроме реализации с избыточностью) .

1) navigate action

Вы можете передавать параметры на экран навигации с передачей аргумента params на экран.

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

routeName - Имя маршрута назначения, которое было зарегистрировано где-то в приложенииrouter

params - параметры для слияния с целевым маршрутом

action - (расширенный уровень) Поддействие для запуска в дочернем маршрутизаторе,если на экране есть навигатор.Полный список поддерживаемых действий см. В документе «Действия».

ключ - Необязательный идентификатор маршрута, по которому следует перейти.Вернитесь к этому маршруту, если он уже существует

Образец 

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

2) screenProps

Вы можете передать глобальный параметр навигации, который может быть доступен на каждом экране для этой навигации.

screenProps - передать дополнительные параметры дочерним экранам

Образец 

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

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

Я создал небольшое приложение-образец, которое, я полагаю, вы пытаетесь достичь.

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>
    );
  }
}
...