如何根据另一个条件内的条件显示视图反应原生？

Question

如果点数大于或等于标记的成本，我想显示标记。如果低于该值，则不应在视图上呈现。标记在数组中，成本由marker.cost调用。 points是状态变量。 this.state.points >= marker.cost无法正常工作，因为marker.cost位于数组中。

class SupporterMapScreen extends Component<{}> {
  static navigationOptions = {
    header: null
  }

  constructor(props) {
    super(props);

    this.state = {
      points: 0,
      beaconMarkers: [
        {
          coordinate: {latitude: 14.554180, longitude: 121.044099},
          key: 0,
          cost: 0,
        },
        {
          coordinate: {latitude: 14.552591, longitude: 121.047822},
          key: 1,
          cost: 10,
        },
        {
          coordinate: {latitude: 14.554140, longitude: 121.047201},
          key: 2,
          cost: 20,
        },
      ],
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <MapView
          style = {styles.map}
          initialRegion = {{
            latitude: 14.554180,
            longitude: 121.044099,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>

          { this.state.beaconMarkers.map(marker => (
            <MapView.Marker
              key={marker.key}
              coordinate={marker.coordinate}
              pinColor='#50FF2E'
              onPress={ () => Alert.alert(
                'Buy Beacon?',
                'It costs ' + marker.cost + ' points in order to buy beacon.',
                [
                  {text: 'No'},
                  {text: 'Yes', onPress: () => console.log('OK Pressed')},
                ],
                { cancelable: false }
              )}/>
          ))}

        </MapView>
        <View style = {styles.pointsBar}>
          <Text style = {styles.points}>POINTS: {this.state.points}</Text>
        </View>
      </View>
    );
  }
}

Answer 1

您可以根据条件

渲染标记

render() {
    return (
      <View style={styles.container}>
        {this.state.beaconMarkers.map(item => {
          if (item.cost == 0) {
            return (
              <View>
                <Text>Equal To Zero </Text>
              </View>
            );
          } else if (item.cost === 10) {
            return (
              <View>
                <Text>Equal To Ten </Text>
              </View>
            );
          }
        })}
      </View>
    );
  }
}