Question

我一直在制作我的第一个React Native应用，目前没有redux，只是RN。这种情况是在Android 7上，它没有显示很多组件，但在更新版本的Android上却有，并且可以在iO上完美运行。

以下是我的问题的屏幕截图，在Android上您可以看到很多空白，但是在iOs上它充满了数据：

Android 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个屏幕，至少带有图标，注释，滑块和下拉菜单。如果我只渲染虚拟文本而不是它们，则所有内容都将渲染，如果我通过下拉菜单等几乎所有内容都渲染了，则也会渲染。有什么想法吗？

Answer 1

再一次，我回答了我自己的问题，感觉就像是冥想的单语服务：D

我已经解决了这个问题。该页面上确实有大量复杂的组件，例如由其他视图分组的大约30个复杂的视图（这是因为页面的该部分对于所有产品都应相同，因此需要进行硬编码）+相同结构化视图的大量FlatList（这是因为产品具有独特的结构，所以它是动态的），并且所有产品都位于ScrollView内以启用滚动（否则，如果没有超过20个屏幕的长页面无法滚动，则没有意义）。因此，我将这些静态硬编码组件放入数组，与动态组件数组合并，仅呈现一个FlatList，用其替换整个ScrollView。

Android 7 React Native组件数量限制？

1 个答案: