这种网格布局能否在 React-Native 中更高效地实现？答案

【问题标题】：Can this grid layout be achieved more efficiently in React-Native?这种网格布局能否在 React-Native 中更高效地实现？
【发布时间】：2016-04-01 03:30:03
【问题描述】：

我看到一个组件的渲染时间很长，我想知道是否可以更有效地实现相同的渲染时间，或者对于 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 渲染一个由 columns 列组成的网格，其中包含每个 rows 等宽/高的行。这是a link 的完整示例。

在模拟器和全新设备上，关闭dev 标志后，我看到渲染时间在 1.5 到 3.5 秒之间，这似乎很多。如果我添加一个按钮来切换左侧面板，布局也需要这个时间来更新。

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

systrace(available here) 表明所有工作都在 UI 和 Render 线程中完成，它还显示一些警告：Long View#draw()。

我是否认为此时 React Native 的元素太多或布局太复杂？如果是这样，是否有任何替代技术，可能类似于浏览器的Canvas，来绘制所有这些元素？如果不是我做错了什么？

非常感谢您的帮助。

【问题讨论】：

作为替代方案，您可以使用 react-native-grid-view。
@sekogs 谢谢！我会试一试。最终，我需要别的东西，因为我需要不同行大小的列，并且我需要防止滚动（我认为 react-native-grid-view 使用 ListView）。但我会测试性能并将其发布在这里，这肯定会很有趣
在测试 react-native-grid-view 后，数字略好，但平均仍高于 1.2s

标签： performance reactjs react-native flexbox

【解决方案1】：

如果您不需要在单元格中打印任何内容，而只需要显示网格，则可以渲染列，然后在其上渲染绝对定位的行。

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

组件的render 方法的性能似乎直接取决于所涉及的原生Views 的数量，这就是Android 上存在collapsable 属性的原因：它允许减少原生Views 的数量，通过不渲染仅布局的那些。

如果您确实需要渲染所有这些 Views，那么截至今天，在 react-native 中加速进程可能没有太多工作要做，但我很想被证明错了！

【讨论】：