React Native iOS 上的视图无缘无故地晃动

Question

我在我正在开发的 RN 应用程序中检测到奇怪的行为。显然，刷新应用程序时，屏幕的一个组件毫无理由地开始震动。iOS 模拟器和 iPhone 设备上都会发生这种情况。它不会在每次刷新时发生，但大多数时候都会发生，当发生这种情况时，模拟器就会变得无响应。

\n\n

以下是所发生情况的 GIF：https://gph.is/g/EvAqBgg

\n\n

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

\n\n

屏幕

\n\n

<Container>\n      <SafeAreaView />\n      <Header>\n        <TouchableOpacity onPress={() => navigation.openDrawer()}>\n          <MaterialIcons name="menu" size={24} color="black" />\n        </TouchableOpacity>\n        <TouchableOpacity onPress={() => navigation.navigate(\'Filter\')}>\n          <MaterialIcons name="search" size={24} color="black" />\n        </TouchableOpacity>\n      </Header>\n      <FlatList\n        data={products}\n        renderItem={({ item }) => (\n          <ProductItem\n            product={item}\n            onPress={() => navigation.navigate(\'Product\', { product: item })}\n          />\n        )}\n        keyExtractor={(item) => item.id}\n        numColumns={2}\n        ListEmptyComponent={() => <Text>No hay elementos</Text>}\n        ListHeaderComponent={<HomeHeader />}\n      ></FlatList>\n      <ShoppingCartButton\n        items={itemsInCart}\n        onPress={() => navigation.navigate(\'ShoppingCart\')}\n        price={price}\n      ></ShoppingCartButton>\n    </Container>\n  );\n}\n\nconst Container = styled.View`\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n`;\n\nconst Header = styled.View`\n  width: 100%;\n  height: 40px;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-left: 16px;\n  padding-right: 16px;\n`;\n

\n\n

震动组件

\n\n

export default function ShoppingCartButton({ onPress, price, items }) {\n  return (\n    <ButtonArea>\n      <Container onPress={onPress}>\n        <CartIndicator>\n          <CartQuantity>{items}</CartQuantity>\n        </CartIndicator>\n        <ButtonTitle>Ver carrito</ButtonTitle>\n        <Price>{price} \xe2\x82\xac</Price>\n      </Container>\n      <SafeAreaView />\n    </ButtonArea>\n  );\n}\n\nconst ButtonArea = styled.View`\n  width: 100%;\n  padding: 16px;\n  border-top-width: 1px;\n  border-top-color: ${colors.separatorGrey};\n  background-color: ${colors.white};\n  box-shadow: 0px -4px 4px rgba(222, 222, 222, 0.2);\n`;\n\nconst Container = styled.TouchableOpacity`\n  height: 48px;\n  width: 100%;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  background-color: ${colors.mainBlue};\n  border-radius: 5px;\n  padding-left: 16px;\n  padding-right: 16px;\n`;\n\nconst CartIndicator = styled.View`\n  background-color: #2c81ab;\n  padding: 4px;\n  padding-left: 8px;\n  padding-right: 8px;\n  border-radius: 3px;\n`;\n\nconst CartQuantity = styled.Text`\n  font-family: \'Medium\';\n  color: ${colors.white};\n`;\n\nconst ButtonTitle = styled.Text`\n  font-family: \'Medium\';\n  color: ${colors.white};\n`;\n\nconst Price = styled.Text`\n  font-family: \'Book\';\n  color: ${colors.white};\n`;\n

\n

Answer 1

尝试使用https://www.npmjs.com/package/react-native-safe-area-context而不是 React Native 中的 SafeAreaView。您可以尝试的另一件事是为 ButtonArea 组件设置固定高度。

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