可触摸的不透明度 OnPress 在 React 本机中不起作用答案

【问题标题】：可触摸的不透明度 OnPress 在 React 本机中不起作用
【发布时间】：2022-01-23 10:20:40
【问题描述】：

TouchableOpacity onPress 在 Flatlist 中不起作用，但是当我将 onPress 替换为 onPressIn/onPressOut 时，它工作正常，但在这种情况下，反应太快并且在滚动时出现问题。我不知道发生了什么，也没有发现任何相关问题。以下是我的代码：

  renderItem = ({ item, index }: { item: any, index: number }) => {
    const { type } = this.props;
    const valueType = {
      phone: item,
      stage: item.title,
      location: item.name
    }
      return (
        <TouchableOpacity
          onPressIn={() => this.onSelect(item, index)}
          style={styles.modalListContainer}
        >
          <Icon name={icon[type]} height={20} width={20}/>
          <Spacer width={10} />
          <View style={styles.modelTextContainer}>
          <Text style={styles.modelText}>{valueType[type]}</Text>
          </View>
          
        </TouchableOpacity>
      )
  }

          <FlatList
            data={item}
            renderItem={this.renderItem}
            keyExtractor={this.keyExtractor}
            ItemSeparatorComponent={() => <><Spacer height={10} /><View style={styles.modelTextDevider} /><Spacer height={10} /></>}
            showsVerticalScrollIndicator={false}
            contentContainerStyle={styles.container}
          />

它使用 react-native-modals 库在 Modal 中呈现。任何帮助，将不胜感激。谢谢。

【问题讨论】：

标签： android react-native react-native-flatlist react-native-modal

【解决方案1】：

react-native-modals，有一个父可触摸组件（PanResponder），它包装了您孩子的组件。在一些安卓设备上，当你有一个像按钮这样的可触摸组件时，触摸事件不会向下传播到子组件，而是被 react-native-modals父组件捕获。

理想的解决方案应该是绝对定位您的按钮，但会破坏您的 UI，并且模式将毫无用处。

此库存储库存在一个问题。 https://github.com/jacklam718/react-native-modals/pull/210 但提供的解决方案对于 Android 设备并非 100% 准确。

如果您使用 React Navigation，则您已经安装了 react-native-gesture-handler。

从react-native-gesture-handler 导入 TouchableOpacity 代替 `react-native.它应该可以解决大多数设备的问题。

【讨论】：