0

我一直在制作我的第一个 React Native 应用程序，现在没有 redux，只有 RN。这个案例是在 Android 7 上的，它没有显示很多组件，但它在更新的 Android 版本上显示，并且在 iO 上完美运行。

这是我的问题的截图，在 Android 上你可以看到很多空白，但在 iO 上它充满了数据：

安卓 7： 在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

IOS： 在此处输入图像描述 在此处输入图像描述

这是结构和CSS：

<ScrollView contentContainerStyle={mainView}>
  <View style={sectionStyle}>...</View>
  <View style={sectionStyle}>...</View>
  ...
  <View style={sectionStyle}>...</View>
</ScrollView>

  mainView: {
    backgroundColor: colors.backgroundGray,
    justifyContent: 'flex-start'
  },
  sectionStyle: {
    paddingTop: 15,
    paddingBottom: 15,
    backgroundColor: colors.mainWhite,
    margin: 5,
    borderWidth: 1,
    borderColor: colors.borderGray,
    borderRadius: 5,
    shadowOpacity: 0.5,
    shadowRadius: 2,
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowColor: colors.shadowColor,
    elevation: 5
}

什么可能导致该问题以及可以采取哪些措施来解决此问题？

UPD：经过几天的调试，我发现问题可能是由于 Android 7 限制在屏幕上呈现的组件数量造成的，因为该页面上有很多组件，例如 10-15 个屏幕，至少有图标、评论、滑块和下拉菜单。如果我只渲染虚拟文本而不是它们 - 一切都会被渲染，如果我渲染几乎所有的东西，例如下拉菜单，也会如此。有任何想法吗？

4

1 回答 1

0

好吧，我再一次回答我自己的问题，感觉就像一个冥想独白服务：D

我已经解决了这个问题。该页面上有大量复杂的组件，例如由其他视图分组的约 30 个复杂视图（这是因为页面的该部分对于所有产品都应该相同，因此它是硬编码的）+ 大量相同结构化视图的平面列表（这是因为产品具有其独特的结构，所以它是动态的），并且所有这些都在 ScrollView 中以启用滚动（否则，拥有 20+ 屏幕长的页面而无法滚动它是没有意义的）。所以我把那些静态硬编码的组件放入数组，与动态组件数组合并，只渲染一个FlatList，用它替换整个ScrollView。

于 2019-04-10T16:09:35.647 回答