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

如何解决TouchableOpacity、负边距和 Android 的问题 - React Native

我在 FlatList 中遇到了 TouchableOpacity 和 Negative Margins 的问题。在 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',proposalId: {
 color: colors.white,fontWeight: 'bold',fontSize: wp(4.5),proposalDate: {
 color: 'rgba(0,0.5)',fontSize: wp(3.5),proposalDetailLabel: {
 fontSize: wp(4),color: 'rgba(0,0.9)',proposalDetailValue: {
 fontSize: wp(4.5),color: colors.white,proposalButtonText: {
 color: colors.white,fontSize: wp(4),button: {
 borderRadius: metrics.radius,backgroundColor: '#002F6C',paddingHorizontal: metrics.padding * 3,buttonContainer: {
 width: '100%',marginTop: metrics.padding,});

export default styles;

解决方法

我在 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。