Передача данных через экраны в React Native

Я новичок в React Native. Мне нужно сделать приложение с картой Google и сделать возможным изменение типа карты с другого экрана. Я использую TabNavigator для переключения между экранами.

Вопрос в том, как изменить тип карты, переключив переключатель на другом экране.

Это мой компонент карты HomeScreen:

<View style={styles.container}>
          <MapView
              mapType={'standard'}
              provider={this.props.provider}
              style={styles.map}
              initialRegion={this.state.region}
              onPress={e => this.onPress(e)}
          >

Я хочу передать тип карты с другого экрана с помощью переключателей

const MAP_TYPES = {
STANDARD: 'standard',
SATELLITE: 'satellite',
HYBRID: 'hybrid',
TERRAIN: 'terrain',
NONE: 'none',};

var radio_props = [
{label: MAP_TYPES.STANDARD, value: MAP_TYPES.STANDARD },
{label: MAP_TYPES.SATELLITE, value: MAP_TYPES.SATELLITE }];

export default class LinksScreen extends React.Component {
     static navigationOptions = {
         title: 'Options',
     };

    onPress(value) {
        this.setState({value:value});
        /*
        Here I want to send value to HomeScreen but I don't know how =(
        */
        console.log(value);
    }
 render() {
   return (
      <ScrollView style={styles.container}>
        <RadioForm
         radio_props={radio_props}
         initial={0}
         onPress={(value) => {this.onPress(value)}}
        />
      </ScrollView>
     );
  }
}

Изображения приложения

Это мой домашний экран с картой

Это мой переключатель


person Andrew    schedule 26.01.2018    source источник


Ответы (1)


Для этого есть два распространенных метода.

  1. Используйте компонент более высокого порядка для поддержания состояния типа карты и передайте его дочерним компонентам в качестве реквизита. Также передайте функцию, которую можно использовать для обновления состояния в компоненте более высокого порядка.
  2. Используйте такую ​​систему, как redux, для создания единого состояния, которое вы можете читать и обновлять из любого места вашего приложения.

Какой метод вы выберете, зависит от личных предпочтений, хотя, если приложение со временем станет более сложным, некоторые средства управления глобальным состоянием, такие как избыточность, могут быть хорошей идеей для использования на раннем этапе.

person Rob Walker    schedule 26.01.2018