1

TouchableOpacity onPress is not working inside Flatlist but when I replaced onPress with onPressIn/onPressOut it is working fine, but in that case the reaction is too fast and having issue while scrolling. I don''t know what it is happening and haven't found any related issue. Below is my code:

  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}
          />

It is rendered inside a Modal using react-native-modals library. Any help would be appreciated. Thank you.

4

1 回答 1

2

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

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

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

如果你使用 React Navigation，那么你已经安装了react-native-gesture-handler.

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

于 2021-12-22T11:54:17.227 回答