代码之家  ›  专栏  ›  技术社区  ›  PolarisRouge

React Native TouchableOpacity不使用绝对位置

  •  0
  • PolarisRouge  · 技术社区  · 6 年前

    我有一个列表,显示与用户输入匹配的结果。touchableOpacity的按下按钮在此列表中不起作用。此列表位于绝对位置,并位于其父视图下方(相对位置)。我唯一能让onPress正常工作的时间是当我移除 top:48 来自列表的样式和onPress适用于直接位于父元素顶部的单个元素。

    export default function IndoorForm(props) {
    return (
        <View style={styles.container}>
          <View style={styles.parent}>
            <Autocomplete
              style={styles.autocomplete}
              autoCompleteValues={autoCompleteValues}
              selectedLocation={props.getDestination}
            ></Autocomplete>
          </View>
        </View>
    );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignSelf: "center",
        position: "absolute",
        top: Platform.OS === "android" ? 25 + 48 : 0 + 48,
        width: Dimensions.get("window").width - 30,
        zIndex: 500
      },
      parent: {
        position: "relative",
        flex: 1,
        borderWidth: 2,
        borderColor: "#AA2B45",
        height: 48,
        backgroundColor: "#fff",
        flexDirection: "row",
        alignItems: "center",
        paddingLeft: 16,
        paddingRight: 16,
        justifyContent: "space-between"
      }
    }
    
    export default function AutoComplete(props: AutoCompleteProps) {
      const { autoCompleteValues } = props;
    
      return (
        <View style={styles.container}>
          <FlatList
            data={autoCompleteValues}
            renderItem={({ item }: { item: POI }) => (
              <TouchableOpacity onPress={() => console.log("Haal")} key={item.displayName} style={styles.list}>
                <Text style={styles.text}>{item.displayName}</Text>
                <Entypo name={"chevron-thin-right"} size={24} color={"#454F63"} />
              </TouchableOpacity>
            )}
          />
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        position: "absolute",
        flex: 1,
        width: Dimensions.get("window").width - 30,
        top: 48,
        borderWidth: 2,
        borderColor: "#F7F7FA",
        backgroundColor: "#F7F7FA",
        zIndex: 999
      },
      list: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingTop: 15,
        paddingLeft: 10,
        paddingBottom: 10,
        borderBottomColor: "rgba(120, 132, 158, 0.08)",
        borderBottomWidth: 1.4,
        zIndex: 999
      }
    }
    
    0 回复  |  直到 6 年前
        1
  •  4
  •   giotskhada    6 年前

    我知道你已经解决了你的问题,但你可以使用这个神奇的图书馆 react-native-gesture-handler ,导入您的 Touchable 从那里开始,他们不在乎在父视图中。你可以随意触摸它们。

        2
  •  1
  •   PolarisRouge    6 年前

    通过动态调整容器高度,使touchableOpacity位于容器内,解决了这一问题。问题是,我将列表定位在父对象之外(正如样式设计所希望的那样),但要让onPress工作,它必须位于父对象内部。

      let autocompleteHeight = autoCompleteValues.length * 65
    
    <View style={[styles.container, {height: autocompleteHeight}]}>