React native 在React Native iOS上，视图无缘无故地抖动

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

下面是发生的情况的GIF：

以下是屏幕和振动部件的代码：

屏幕

<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;
`;

navigation.openDrawer（）}>
navigation.navigate（'Filter'）}>
(
navigation.navigate（'Product'，{Product:item}）}
/>
)}
keyExtractor={（项）=>item.id}
numColumns={2}
ListMPtyComponent={（）=>无hay元素}
ListHeaderComponent={}
>
导航。导航（'ShoppingCart'）}
价格={price}
>
);
}
const Container=styled.View`
弹性：1；
对齐项目：居中；
证明内容：中心；
背景色：白色；
`;
const Header=styled.View`
宽度：100%；
高度：40px；
弯曲方向：行；
对齐项目：居中；
证明内容：之间的空间；
左侧填充：16px；
右边填充：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};
`;

导出默认函数ShoppingCartButton（{onPress，price，items}）{
返回(
{items}
卡里托河
{价格}€
);
}
const ButtonArea=styled.View`
宽度：100%；
填充：16px；
边框顶部宽度：1px；
边框顶部颜色：${colors.separatorGrey}；
背景色：${colors.white}；
盒影：0px-4px4pxRGBA（2222222220.2）；
`;
const Container=styled.TouchableOpacity`
高度：48px；
宽度：100%；
弯曲方向：行；
证明内容：之间的空间；
对齐项目：居中；
背景色：${colors.mainBlue}；
边界半径：5px；
左侧填充：16px；
右边填充：16px；
`;
const cartdindicator=styled.View`
背景色：#2c81ab；
填充：4px；
左侧填充：8px；
右边填充：8px；
边界半径：3px；
`;
const CartQuantity=styled.Text`
字体系列：“中等”；
颜色：${colors.white}；
`;
const buttontile=styled.Text`
字体系列：“中等”；
颜色：${colors.white}；
`;
const Price=styled.Text`
字体系列：“书”；
颜色：${colors.white}；
`;

尝试使用React Native中的而不是SafeAreaView。 您可以尝试的另一件事是为ButtonArea组件设置固定高度

---

我不能保证这些会起作用，但它为我解决了震动问题。

嗨，伊万，你找到解决办法了吗？