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

Question

我是 React Native 的新手。我必须制作一个带有 google 地图的应用程序，并且可以从其他屏幕更改地图类型。我正在使用 TabNavigator 在屏幕之间切换。

问题是如何通过切换其他屏幕中的单选按钮来更改地图类型。

这是我的主屏幕地图组件：

<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

Answer 1

这有两种常用的技术。

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

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

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

Pass data through screens in React Native

react-native

react-native-maps