Question

如何在FlatList中替换颜色？ I tried the following example，但我无法使它正常工作。

下面是我的代码：

_renderItem = ({ item, index }) => {
  var geodist = require("geodist");
  var dist = geodist(
    { lat: item.cLat, lon: item.cLong },
    { lat: item.LatL, lon: item.Long2 },
    "mi"
  );
  return (
    <View style={{ color: index % 2 === 0 ? "red" : "green" }}>
      <Text style={styles.Address1}>{item.addr} </Text>

      <TouchableOpacity
        onPress={() => {
          this.handleClick(`tel:${item.phone}`);
        }}
      >
        <Image
          source={require("../images/call.png")}
          style={styles.actionImage}
        />
      </TouchableOpacity>
      <Text style={styles.Address1}>{item.phone}</Text>
      <View style={styles.sepBoxes}>
        <View style={[styles.box, styles.box1]}>
          <View style={styles.AddressRow}>
            {item.Online != "" ? (
              <TouchableOpacity onPress={() => Linking.openURL(item.Online)}>
                <Image
                  source={require("../images/www-icon.png")}
                  style={styles.actionImage1}
                />
              </TouchableOpacity>
            ) : null}
            <Text style={styles.underLineTextOnline}> Online</Text>
            <TouchableOpacity onPress={() => Linking.openURL(destUrl)}>
              <Text style={styles.underLineText}>Directions</Text>
            </TouchableOpacity>

            <Text style={styles.AddressSpace}>Miles:{dist}</Text>
          </View>
        </View>
      </View>

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

Answer 1

renderItem在作为第一个参数传递的对象中具有index，因此您可以使用它来替代颜色。

示例

_renderItem = ({ item, index }) => (
  <View style={{ color: index % 2 === 0 ? 'red' : 'green' }}>
    <Text>Hello World!</Text>
  </View>
);

FlatList中的替代颜色

1 个答案: