如何在React Native中有效地渲染多个视图？

Question

在我目前正在研究的游戏上，有一块12x14的大木板，用户可以在其中与每个单元交互并对其执行操作。 董事会看起来像这样：

最大的问题是渲染整个12x14电路板的时间太长（在体面的手机上大约需要一秒钟，因此在低端手机上可能需要更长的时间）

我在Expo上使用React Native

这是我目前渲染整个木板的方式：

render() {
    let rowCount = 14;
    let columnCount = 12;
    let rows = [];

    for (let i = 0; i < rowCount; i++) {
        const row = boardRows[i];
        let columns = [];

        for (let j = 0; j < columnCount; j++) {
            let id = j + i * row.length;

            columns.push(
                <View key={id} onTouchEnd={this.onCellTouch} style={styles.cell}>
                    <Text>A</Text>
                </View>);
        }

        rows.push(<View style={styles.row} key={rows.length} >{columns}</View>);
    }

    return rows;
}

我尝试使用Kotlin原生使用Android进行相同的布局，这似乎很好用，但是在这种情况下，我需要在React Native中使用它。