TouchableHighlight不能涵盖整个(卡片)组件

时间:2019-08-06 14:03:02

标签: react-native react-native-elements

TouchableHighlight似乎无法覆盖我正在使用的整个(卡片)组件。

似乎只有在我单击组件中的附近时才会触发。

例如,当我单击Card组件中间没有文本的位置时,该按钮不起作用。

https://imgur.com/a/7MkEIrS

我在其中显示什么区域不会触发onPress的照片。 (没有足够的声誉来发布图片)

<View>
        <TouchableHighlight
          onPress={() => this.viewDetail(this.props.uid)}
          underlayColor={Colors.clear}
        >
          <Card key={String(this.props.id)} containerStyle={styles.card}>
            <View style={{ flex: 1, flexDirection: "row" }}>
              <View style={{ flex: 1 }}>
                <Text style={styles.title}>{String(this.props.title)}</Text>
              </View>
              <View style={{ flex: 0.5 }}>
                <Text style={styles.price}>€{String(this.props.price)}</Text>
              </View>
            </View>
            <View style={{ flex: 1, flexDirection: "row", marginTop: 15 }}>
              <View style={{ flex: 1 }}>
                <Text style={styles.address}>
                  <Ionicons name="ios-pin" style={styles.icon} />

                  {/* String(
                  " " +
                    this.props.zipcode +
                    " " +
                    this.props.city +
                    ", " +
                    this.props.streetName +
                    " " +
                    this.props.streetNumber
                ) */

                  String(" " + this.props.zipcode + " " + this.props.city)}
                </Text>
              </View>
              <View style={{ flex: 1 }}>
                <Text style={styles.date}>
                  <Ionicons name="ios-time" style={styles.icon} />

                  {String(" " + this.props.date /* .toLocaleDateString() */)}
                </Text>
              </View>
            </View>
          </Card>
        </TouchableHighlight>
      </View>

我希望单击由TouchableHighlet包裹的Comonent上的任何位置以触发它的onPress。

实际结果:中间的“盲点”不会触发onPress。

0 个答案:

没有答案