react-native - View 在 React Native iOS 上无缘无故地抖动

Question

我在我正在开发的 RN 应用程序中检测到一个奇怪的行为。显然，刷新应用程序时，屏幕的其中一个组件开始晃动，这显然是没有原因的。这发生在 iOS 模拟器和 iPhone 设备上。并不是每次刷新时都会发生这种情况，但大多数情况下，当发生这种情况时，模拟器会变得无响应。

这是发生了什么的GIF:https://gph.is/g/EvAqBgg

下面是屏幕和震动组件的代码:

屏幕

<Container>
      <SafeAreaView />
      <Header>
        <TouchableOpacity onPress={() => navigation.openDrawer()}>
          <MaterialIcons name="menu" size={24} color="black" />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Filter')}>
          <MaterialIcons name="search" size={24} color="black" />
        </TouchableOpacity>
      </Header>
      <FlatList
        data={products}
        renderItem={({ item }) => (
          <ProductItem
            product={item}
            onPress={() => navigation.navigate('Product', { product: item })}
          />
        )}
        keyExtractor={(item) => item.id}
        numColumns={2}
        ListEmptyComponent={() => <Text>No hay elementos</Text>}
        ListHeaderComponent={<HomeHeader />}
      ></FlatList>
      <ShoppingCartButton
        items={itemsInCart}
        onPress={() => navigation.navigate('ShoppingCart')}
        price={price}
      ></ShoppingCartButton>
    </Container>
  );
}

const Container = styled.View`
  flex: 1;
  align-items: center;
  justify-content: center;
  background-color: white;
`;

const Header = styled.View`
  width: 100%;
  height: 40px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-left: 16px;
  padding-right: 16px;
`;

振动组件

export default function ShoppingCartButton({ onPress, price, items }) {
  return (
    <ButtonArea>
      <Container onPress={onPress}>
        <CartIndicator>
          <CartQuantity>{items}</CartQuantity>
        </CartIndicator>
        <ButtonTitle>Ver carrito</ButtonTitle>
        <Price>{price} €</Price>
      </Container>
      <SafeAreaView />
    </ButtonArea>
  );
}

const ButtonArea = styled.View`
  width: 100%;
  padding: 16px;
  border-top-width: 1px;
  border-top-color: ${colors.separatorGrey};
  background-color: ${colors.white};
  box-shadow: 0px -4px 4px rgba(222, 222, 222, 0.2);
`;

const Container = styled.TouchableOpacity`
  height: 48px;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: ${colors.mainBlue};
  border-radius: 5px;
  padding-left: 16px;
  padding-right: 16px;
`;

const CartIndicator = styled.View`
  background-color: #2c81ab;
  padding: 4px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 3px;
`;

const CartQuantity = styled.Text`
  font-family: 'Medium';
  color: ${colors.white};
`;

const ButtonTitle = styled.Text`
  font-family: 'Medium';
  color: ${colors.white};
`;

const Price = styled.Text`
  font-family: 'Book';
  color: ${colors.white};
`;

Answer 1

尝试使用 https://www.npmjs.com/package/react-native-safe-area-context而不是来自 React Native 的 SafeAreaView。
您可以尝试的另一件事是为 ButtonArea 组件设置固定高度。
不能保证这些会起作用，但它为我解决了抖动问题。