如何在“地图视图”中显示不同的位置取决于所选的选择器？ （反应本机）

Question

每个人。我正在构建一个关于在“地图视图”中显示其他位置的React本机应用程序，具体取决于所选的选择器。

我当时想通过检测字符串中包含的单词来使用条件语句，我使用string-contains库来检测字符串中的某些单词。这是我的代码示例：

export default class App extends React.Component {
renderMap(){
  if(contains(this.state.name, "Branch 1")){
            return <MapView
            initialRegion={{
              latitude: 53.433980,
              longitude: -2.950960,
              longitudeDelta: 0.0922,
              latitudeDelta: 0.0421,
            }}
            style={{height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'}}
          ><MapView.Marker
          coordinate={{
            latitude: 37.78825,
            longitude: -122.4324,
          }}
        /></MapView>;
        } else if(contains(this.state.name, "Branch 2")){
           return <MapView
            initialRegion={{
              latitude: 51.491610,
              longitude: -0.135560,
              longitudeDelta: 0.0922,
              latitudeDelta: 0.0421,
            }}
            style={{height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'}}
          ><MapView.Marker
          coordinate={{
            latitude: 37.78825,
            longitude: -122.4324,
          }}
        /></MapView>;
        }
        else if(contains(this.state.name, "Branch 3")){
           return <MapView
            initialRegion={{
              latitude: 53.461220,
              longitude: -2.269540,
              longitudeDelta: 0.0922,
              latitudeDelta: 0.0421,
            }}
            style={{height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'}}
          ><MapView.Marker
          coordinate={{
            latitude: 37.78825,
            longitude: -122.4324,
          }}
        /></MapView>;
        }
        else if(contains(this.state.name, "Branch 4")){
           return  <MapView
            initialRegion={{
              latitude: 51.262290,
              longitude: -1.081610,
              longitudeDelta: 0.0922,
              latitudeDelta: 0.0421,
            }}
            style={{height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'}}
          ><MapView.Marker
          coordinate={{
            latitude: 37.78825,
            longitude: -122.4324,
          }}
        /></MapView>;
        }
}
render(){
const branchesPicker = this.state.branches.map((item, branch_id)=> {
      return(
            <Picker.Item
            label={item.name}
            value={item.address}
            key={item.branch_id}/>
        )
    });
      this.renderMap();
return(
<View style={styles.container}>
      <Picker
          selectedValue={this.state.name}
          mode="dropdown"
          style={{ height: 50, justifyContent: 'center', flex:4, alignItems: 'stretch', }}
          onValueChange={(item)=> this.setState({name: item})}>
        {branchesPicker}
    </Picker>
        {this.renderMap()}
      </View>

当我运行此代码时，选择器工作正常，但是当我尝试更改选择器时，地图未按我预期的那样进行更改。它只是显示一个静态的地图视图（但地图视图并非总是来自分支1，有时在重新加载时会显示分支2或3。但要注意的是，它没有变化。）

fyi，this.state.name显示的是所选选取器的分支名称。

非常感谢您的帮助！真的很重要。

Answer 1

假设您使用的是react-native-maps。

初始区域用于在第一次加载地图时渲染和显示位置。加载后何时或如果要更改位置，可以使用animateToRegion或许多其他类似的methods。因此，当您想在选择器中选择某些东西时更改地图上的位置时，只需在输入中调用这些方法即可。

这是参考代码段。

 this.map.animateToRegion({ latitude: region.latitude, longitude: region.longitude, latitudeDelta: latitudeDelta, longitudeDelta: longitudeDelta }, timeToChangeRegionInMilliSeconds);