react-native-maps 条件标记

Question

我有一个标记地图，它在一个坐标数组中呈现每个标记。我正在尝试根据我给标记的键有条件地呈现标记。您可以通过查看我的 snack example here 或我在下面发布的代码来准确了解我是如何尝试执行此操作的。

谢谢你，我比你知道的还要感激。

export default class Map extends React.Component {
  markers = [];
  state = {
    coordinates: [
      {
        name: '1',
        latitude: 36.212111515965525,
        longitude: -81.67527588876025,
        status: 'busy',
      },
      {
        name: '2',
        latitude: 36.21754431261142,
        longitude: -81.68598350040361,
        status: 'open',
      },
      {
        name: '3',
        latitude: 36.21744712906634,
        longitude: -81.68168562889075,
        status: 'busy',
      },
      {
        name: '4',
        latitude: 36.219352000280495,
        longitude: -81.68559146421954,
        status: 'open',
      },
    ],
  };

  render() {
    return (
      <View style={{ ...StyleSheet.absoluteFillObject }}>
        <MapView
          style={styles.map}
          provider={PROVIDER_GOOGLE}
          showsUserLocation={true}
          showsMyLocationButton={true}
          ref={(map) => (this._map = map)}
          initialRegion={{
            latitude: 36.212111515965525,
            longitude: -81.67527588876025,
            latitudeDelta: 0.05,
            longitudeDelta: 0.05
          }}>
          {this.state.coordinates.map((marker, index) => (
            if(marker.status == 'busy'){
            <Marker
              key={marker.name}
              ref={(ref) => {this.markers[index] = ref;}}
              onPress={() => this.onMarkerPress(marker, index)}
              coordinate={{
                latitude: marker.latitude,
                longitude: marker.longitude,
              }}>
              <Image
                source={require('./assets/blueMarker.png')}
                style={{ height: scale(50), width: scale(50) }}
              />
            </Marker>
            } else {
               <Marker
              key={marker.name}
              ref={(ref) => {this.markers[index] = ref;}}
              onPress={() => this.onMarkerPress(marker, index)}
              coordinate={{
                latitude: marker.latitude,
                longitude: marker.longitude,
              }}>
            </Marker>
            }


          ))}
        </MapView>
      </View>
    );
  }
}

Answer 1

您没有使用正确的 JSX 语法。您不能使用 if-then-else，请改用三元运算符。

{ this.state.coordinates.map((marker, index) => (
  marker.status == 'busy' ?
  <Marker
    key={marker.name}
    ref={(ref) => {this.markers[index] = ref;}}
    onPress={() => this.onMarkerPress(marker, index)}
    coordinate={{
      latitude: marker.latitude,
      longitude: marker.longitude,
    }}>
    <Image
      source={require('./assets/blueMarker.png')}
      style={{ height: scale(50), width: scale(50) }}
    />
  </Marker>
  :
  <Marker
    key={marker.name}
    ref={(ref) => {this.markers[index] = ref;}}
    onPress={() => this.onMarkerPress(marker, index)}
    coordinate={{
      latitude: marker.latitude,
      longitude: marker.longitude,
    }}>
  </Marker>
))}

Answer 2

在这里，在 JSX 中我们只允许渲染组件。

如果我们必须有条件地渲染某些东西，我们可以为此使用三元运算符。

在这里我可以在代码中看到你使用了 If...Else...

您的代码的解决方案：

{
    this.state.coordinates.map((marker, index) => (
        marker.status == 'busy'
        ?
            <Marker
                key={marker.name}
                ref={(ref) => {this.markers[index] = ref;}}
                onPress={() => this.onMarkerPress(marker, index)}
                coordinate={{
                latitude: marker.latitude,
                longitude: marker.longitude,
                }}>
                <Image
                source={require('./assets/blueMarker.png')}
                style={{ height: scale(50), width: scale(50) }}
                />
            </Marker>
        :
            <Marker
                key={marker.name}
                ref={(ref) => {this.markers[index] = ref;}}
                onPress={() => this.onMarkerPress(marker, index)}
                coordinate={{
                latitude: marker.latitude,
                longitude: marker.longitude,
                }}>
            </Marker>
    ))
}

react-native-maps 条件标记

react-native-maps conditional markers

react-native

react-native-maps