Question

我是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

Answer 1

有两种常见技巧。

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

这是个人偏好的问题，你选择哪种方法，但如果应用程序随着时间的推移变得越来越复杂，那么像redux这样的全球状态管理可能是早期使用的好主意。

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

1 个答案: