在 React Native 中通过屏幕传递数据答案

【问题标题】：Pass data through screens in React Native在 React Native 中通过屏幕传递数据
【发布时间】：2018-01-26 11:55:52
【问题描述】：

我是 React Native 的新手。我必须用谷歌地图制作一个应用程序，并可以从其他屏幕更改地图类型。我正在使用 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)}
          >

我想通过单选按钮从另一个屏幕传递 mapType

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

应用图片

This is my home screen with map

This is my switch

【问题讨论】：

标签： react-native react-native-maps

【解决方案1】：

有两种常用的技术。

使用高阶组件来维护地图类型的状态，并将其作为道具传递给子组件。还传递一个函数，该函数可用于更新高阶组件中的状态。
使用诸如 redux 之类的系统来创建单一状态，您可以从应用程序的任何位置读取和更新该状态。

选择哪种方法取决于个人喜好，但如果应用程序会随着时间的推移变得更加复杂，那么尽早使用一些全局状态管理（例如 redux）可能是一个好主意。

【讨论】：