Android 7 React Native组件数量限制?
Android 7 React Native number of components limit?
我一直在制作我的第一个 React Native 应用程序,目前没有 redux,只有 RN。这个案例在 Android 7 上,它没有显示很多组件,但它在 Android 的更新版本上显示并且在 iOs.
上完美运行
这是我的问题的屏幕截图,在 Android 上你可以看到很多空白 space,但在 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
}
什么可能导致该问题以及如何解决这个问题?
更新:
经过几天的调试,我发现问题可能是由于 Android 7 限制了屏幕上呈现的组件数量,因为该页面上有很多组件,至少有 10-15 个屏幕带有图标,评论、滑块和下拉菜单。如果我只渲染虚拟文本而不是它们 - 一切都会被渲染,如果我渲染几乎所有的文本,例如下拉菜单,也会渲染。
有什么想法吗?
好吧,我又一次回答了我自己的问题,感觉就像一个冥想的独白服务:D
我已经解决了这个问题。该页面上确实有大量复杂的组件,比如 ~30 个由其他视图分组的复杂视图(这是因为页面的那部分对于所有产品应该是相同的,所以它是硬编码的)+ 相同结构化视图的大量 FlatList(这是因为产品具有其独特的结构,所以它是动态的),并且所有这些都在 ScrollView 内部以启用滚动(否则,拥有 20 多个屏幕长的页面而无法滚动它是没有意义的)。
所以我把那些静态的硬编码组件放到数组中,与动态组件数组合并,只渲染一个FlatList,用它替换整个ScrollView。
我一直在制作我的第一个 React Native 应用程序,目前没有 redux,只有 RN。这个案例在 Android 7 上,它没有显示很多组件,但它在 Android 的更新版本上显示并且在 iOs.
上完美运行这是我的问题的屏幕截图,在 Android 上你可以看到很多空白 space,但在 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
}
什么可能导致该问题以及如何解决这个问题?
更新: 经过几天的调试,我发现问题可能是由于 Android 7 限制了屏幕上呈现的组件数量,因为该页面上有很多组件,至少有 10-15 个屏幕带有图标,评论、滑块和下拉菜单。如果我只渲染虚拟文本而不是它们 - 一切都会被渲染,如果我渲染几乎所有的文本,例如下拉菜单,也会渲染。 有什么想法吗?
好吧,我又一次回答了我自己的问题,感觉就像一个冥想的独白服务:D
我已经解决了这个问题。该页面上确实有大量复杂的组件,比如 ~30 个由其他视图分组的复杂视图(这是因为页面的那部分对于所有产品应该是相同的,所以它是硬编码的)+ 相同结构化视图的大量 FlatList(这是因为产品具有其独特的结构,所以它是动态的),并且所有这些都在 ScrollView 内部以启用滚动(否则,拥有 20 多个屏幕长的页面而无法滚动它是没有意义的)。 所以我把那些静态的硬编码组件放到数组中,与动态组件数组合并,只渲染一个FlatList,用它替换整个ScrollView。