TouchableOpacity、负边距和 Android 的问题 - React Native答案

【问题标题】：Problem with TouchableOpacity, negative margin and Android - React NativeTouchableOpacity、负边距和 Android 的问题 - React Native
【发布时间】：2021-04-06 11:30:45
【问题描述】：

我遇到了 FlatList 中的 TouchableOpacity 和负边距问题。在 iOS 上运行良好，但在 Android 上，当我单击其他 TochableOpacity 前面的 TouchableOpacity 时，后面的 TouchableOpacity 会触发。我不知道如何解决这个问题。

iOS Image

我点击了“Proposta 70”，但从后面触发了“Proposta 78”。 Android Image

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;

【问题讨论】：

标签： android react-native margin react-native-flatlist touchableopacity

【解决方案1】：

我在 Android 上遇到了完全相同的问题。 My FlatList rendered items with negative margin to superimpose them on each other。 iOS 上的 touchable 是完美的，但在 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。

【讨论】：

【解决方案2】：

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

在我的例子中，View 组件的 marginBottom 为负，而我想要的可触摸部分也在底部，所以我将其反转并将 View 放在下一个组件中，并给出负的 marginTop。所以我想要触摸的部分工作得很好。

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

【讨论】：