在React-Native中可以更高效地实现此网格布局吗？

我在组件上看到很长的渲染时间，并想知道是否可以更有效地实现相同的效果，或者如果它仅仅是React Native的两个多元素/太多计算。在React-Native中可以更高效地实现此网格布局吗？

布局看起来像这样：

<View style={{flex: 1, flexDirection: 'row', alignItems: 'stretch'}}> 
    <View style={{width: 250}} /> 
    <View style={{flex: 1}}> 
     <View style={{height: 50}} /> 
     <View style={{flex: 1}}> 
      <Grid columns={15} rows={40} /> 
     </View> 
    </View> 
</View>

凡Grid部件简单地呈现使用flex含有每种rows行相等的宽度/高度的columns列的网格。这里是a link一个完整的例子。

无论是在仿真器还是一个全新的设备上，dev标志都关闭了，我看到渲染时间在1.5到3.5秒之间，这看起来很多。如果我添加一个按钮来切换左侧面板，布局还需要这段时间来更新。

我没有使用flex并使用预先计算Dimensions.get('window')这两个州的所有值，但结果是相似的尝试。

systrace（可用here）显示所有工作都在UI和Render线程中完成，并且还显示一些警告：Long View#draw()。

我是正确的思维，在这一点上它只是太多的元素或过于复杂的布局为本地做出反应？如果是的话，是否还有其他技术可以用来绘制所有这些元素？可能类似于浏览器的Canvas？如果不是我做错了什么？

非常感谢您的帮助。

来源

2016-03-15 VonD

作为替代方案，您可以使用react-native-grid-view。 – sekogs

@sekogs谢谢！我会试一试。最终，我还需要其他东西，因为我需要不同行大小的列，并且需要防止滚动（我认为react-native-grid-view使用ListView）。但是我会测试perf并将它发布到这里，在测试react-native-grid-view之后肯定会很有趣 – VonD

，这个数字稍微好一些，但平均仍然高于1.2s – VonD

如果您不需要在细胞打印任何东西，但只需要在网格显示，可以呈现列，然后在他们呈现绝对定位的行。

这意味着对于x * y网格，您将有x + yViews而不是x * y：效率更高！

分量的render方法的表现似乎直接对本地Views涉及的数量，这也就是为什么在Android上存在collapsable道具依赖：它允许通过不渲染是那些以减少原生Views数量，布局而已。

如果做需要渲染所有这些Views，那么有可能不是很多工作要做，加快反应母语为今天的过程，但我很乐意被证明是错误的！

来源

2016-03-31 19:22:03 VonD

在React-Native中可以更高效地实现此网格布局吗？

回答

相关问题