TouchableOpacity存在负边距问题，会影响Android端 - React Native

Question

我在使用 FlatList 时遇到了 TouchableOpacity 和负边距的问题。在 iOS 上工作正常，但在 Android 上，当我点击前面的 TouchableOpacity 时，后面的 TouchableOpacity 会响应。我不知道怎样解决这个问题。

iOS 图片： 链接 我点击 "Proposta 70"，但却响应了后面的 "Proposta 78"。

Android 图片： 链接 FlatList 代码：

<View style={styles.containerList}>
    <FlatList
      data={proposalsList}
      keyExtractor={item => item.proposta_id}
      renderItem={({ item, index }) => (
        <RenderItem
          item={item}
          index={index}
          isLoweredCard={
            openedCardIndex !== null && index === openedCardIndex + 1
          }
          changeOpenedCardIndex={changeOpenedCardIndex}
        />
      )}
      refreshing={loading}
      onRefresh={() => getProposalsAndNotifications()}
    />
  </View>

RenderItem 代码

<TouchableOpacity
  style={styles.container(index, isLoweredCard)}
  onPress={() => changeOpenedCardIndex(index)}
>
  <>
    <View
      style={[
        styles.lineContainer,
        { marginBottom: metrics.padding * 1.5 },
      ]}
    >
      <View
        style={{
          width: '50%',
        }}
      >
        <Text style={styles.proposalId}>
          {`Proposta ${item.proposta_id}`}
        </Text>
        <Text style={styles.proposalDate}>
          {dayjs(item?.proposta_data_criacao).format('DD.MM.YYYY')}
        </Text>
      </View>
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'flex-end',
        }}
      >
        <View style={styles.statusContainer}>
          <Text style={{ fontSize: wp(4), fontWeight: 'bold' }}>
            <TypeStatus status={item?.proposta_status} />
          </Text>
        </View>
      </View>
    </View>
    <View style={styles.lineContainer}>
      <Text style={styles.proposalDetailLabel}>Valor solicitado</Text>
      <Text style={styles.proposalDetailValue}>
        {formatCurrency(item?.proposta_valor_financiado)}
      </Text>
    </View>
    <View style={styles.lineContainer}>
      <Text style={styles.proposalDetailLabel}>Valor liberado</Text>
      <Text style={styles.proposalDetailValue}>
        {formatCurrency(item?.proposta_valor_financiado)}
      </Text>
    </View>
    <View style={styles.lineContainer}>
      <Text style={styles.proposalDetailLabel}>Parcelas</Text>
      <Text style={styles.proposalDetailValue}>
        {`${item?.proposta_valor_prazo}x`}
      </Text>
    </View>
    <View style={styles.lineContainer}>
      <Text style={styles.proposalDetailLabel}>Valor da parcela</Text>
      <Text style={styles.proposalDetailValue}>
        {formatCurrency(item?.proposta_valor_parcela)}
      </Text>
    </View>
    <View style={styles.buttonContainer}>
      <Button
        onPress={goToDetails}
        title="Ver detalhes"
        titleStyle={styles.proposalButtonText}
        style={styles.button}
      />
    </View>
  </>
</TouchableOpacity>

物品的样式

import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';

import { metrics, colors } from '../../../../constants';

const styles = StyleSheet.create({
container: (index, isLoweredCard) => ({
 backgroundColor: `#00${index}F${index}C`,
 marginTop: !isLoweredCard && index !== 0 ? -wp(53) : metrics.padding,
 marginHorizontal: metrics.padding,
 alignContent: 'center',
 padding: metrics.padding,
 borderRadius: metrics.radius,
 zIndex: -(index + 999),
}),
lineContainer: {
 width: '100%',
 justifyContent: 'space-between',
 flexDirection: 'row',
 marginBottom: metrics.padding / 2,
},
statusContainer: {
 backgroundColor: colors.white,
 borderRadius: 20,
 width: '70%',
 paddingVertical: 3,
 alignItems: 'center',
 justifyContent: 'center',
},
proposalId: {
 color: colors.white,
 fontWeight: 'bold',
 fontSize: wp(4.5),
},
proposalDate: {
 color: 'rgba(0, 0, 0, 0.5)',
 fontWeight: 'bold',
 fontSize: wp(3.5),
},
proposalDetailLabel: {
 fontSize: wp(4),
 color: 'rgba(0, 0, 0, 0.9)',
},
proposalDetailValue: {
 fontSize: wp(4.5),
 color: colors.white,
 fontWeight: 'bold',
},
proposalButtonText: {
 color: colors.white,
 fontWeight: 'bold',
 fontSize: wp(4),
},
button: {
 borderRadius: metrics.radius,
 backgroundColor: '#002F6C',
 paddingHorizontal: metrics.padding * 3,
},
buttonContainer: {
 width: '100%',
 marginTop: metrics.padding,
 alignItems: 'center',
},
});

export default styles;

- Bruno Ricardo Secco

Answer 1

我在Android上遇到了完全相同的问题。我的 FlatList 将项目呈现为负边距以使它们重叠在一起。在iOS上可触摸性很好，但在Android上却会按压最低的项目。

最终，我通过替换解决了这个问题。

import { TouchableOpacity } from 'react-native';

使用

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

在我的情况下，使用的是 react-native 0.63.4 和 react-native-gesture-handler 1.9.0。

- Chris

Answer 2

在我的情况下，唯一的解决方案是反转负边距（顶部/底部）。

在我的情况下，View组件具有负的marginBottom，我想要的可触摸部分也在底部，因此我将其反转并将View放入下一个组件中，并给予负marginTop。所以我想要触摸的部分可以正常工作。

有点奇怪，但对我来说效果很好...

- danielbcarvalho