“绝对”定位视图中的 TouchableOpacity答案

【问题标题】：TouchableOpacity inside 'absolute' positioned view“绝对”定位视图中的 TouchableOpacity
【发布时间】：2020-02-23 20:40:47
【问题描述】：

我有以下看法

  <FlatList
      style={{marginTop: 5,
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      borderRadius: 5, backgroundColor: ACTIVITY_BACKGROUND_COLOR}}
      keyboardShouldPersistTaps={'always'}
      extraData={this.state.suggestions}
      listKey={(item, index)=>index.toString()}
      showsHorizontalScrollIndicator={false}
      horizontal={false}
      data={this.state.suggestions}
      keyExtractor={(index)=>index}
      renderItem={({item, index}) => {
           return (
                 <TouchableOpacity
                 onPress={()=>console.log('pressed')}
                 style={{paddingHorizontal: 10,
                 paddingTop: 5}}>
                       <Text
                       style={[styles.labelText, {
                              color: PRIMARY_COLOR,
                              marginVertical: 5,
                              backgroundColor:ACTIVITY_BACKGROUND_COLOR}]}>{item.description}</Text>
                       </TouchableOpacity>
                      );}}
     />

TouchableOpacity 在Android 中的Flatlist 的“绝对”内似乎不起作用。它如何在IOS 上工作。我试过添加zIndex，但它没有任何效果，TouchableOpacity 不可点击。这种行为有什么原因吗？

【问题讨论】：

这可能是因为状态行高度。
你能解释一下吗。你是指 Text 组件的 lineheight 吗？
您的列表在您手机的顶部。该区域可以是状态行区域。换句话说，状态行和您的列表可能会重叠。
哦...不，它肯定不会重叠。一旦我删除 position: 'absolute' 它就可以完美地工作。
是的，如果您删除该位置，您设置的方向将起作用。所以你的名单在安全区。但是，如果您设置了位置，您的列表可能会在安全区域之外的状态行中。

标签： react-native z-index stylesheet absolute touchableopacity

【解决方案1】：

我遇到了同样的问题。尝试使用 react-native-geasture-handler。它对我有用。

import { TouchableOpacity } from 'react-native-gesture-handler';

【讨论】：