React Native中如何将对象数组映射渲染为网格布局按钮？

问题背景 #

需要将卡牌对象数组映射渲染为计算器风格的按钮网格布局，实现过程中应用崩溃，目标布局效果如下：

原始问题代码 #

export default function App() {

const Cards = [
{ card: "A", count: -1 },
{ card: "K", count: -1 },
{ card: "Q", count: -1 },
{ card: "J", count: -1 },
{ card: 10, count: -1 },
{ card: 9, count: 0 },
{ card: 8, count: 0 },
{ card: 7, count: 0 },
{ card: 6, count: 1 },
{ card: 5, count: 1 },
{ card: 4, count: 1 },
{ card: 3, count: 1 },
{ card: 2, count: 1 },
];

return (
 <View style={styles.container}>
  <View style={styles.CardPad}>
  {Cards.map((btn) =>
  
    <TouchableOpacity>
      {btn}
    </TouchableOpacity>
  
  )}
  </View>
  <Text>Open up App.js to start working on your app!</Text>
  <StatusBar style="auto" />
</View>
);
}

核心错误点 #

• 直接渲染JS对象导致崩溃：map遍历拿到的btn是包含card、count属性的普通对象，React Native无法直接渲染原生JS对象，必须提取可渲染的基础类型值、用Text组件包裹后才能展示，这是崩溃的直接原因。
• 列表项缺少唯一key：遍历生成的组件根节点没有设置key属性，会触发React渲染性能警告，更新列表时可能出现渲染错乱。
• 网格布局未配置：默认View为纵向流式布局，不会自动排成网格，需要给父容器添加弹性换行相关样式才能实现计算器按钮的排列效果，样式代码不会影响核心功能逻辑，仅控制最终展示效果。

修复后实现代码 #

import { View, Text, TouchableOpacity, StatusBar, StyleSheet } from 'react-native';

export default function App() {
  const Cards = [
    { card: "A", count: -1 },
    { card: "K", count: -1 },
    { card: "Q", count: -1 },
    { card: "J", count: -1 },
    { card: 10, count: -1 },
    { card: 9, count: 0 },
    { card: 8, count: 0 },
    { card: 7, count: 0 },
    { card: 6, count: 1 },
    { card: 5, count: 1 },
    { card: 4, count: 1 },
    { card: 3, count: 1 },
    { card: 2, count: 1 },
  ];

  return (
    <View style={styles.container}>
      <View style={styles.CardPad}>
        {Cards.map((btn, index) => (
          <TouchableOpacity key={index} style={styles.cardBtn}>
            {/* 仅渲染需要展示的card字段，文本必须放在Text组件内 */}
            <Text style={styles.cardText}>{btn.card}</Text>
          </TouchableOpacity>
        ))}
      </View>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

// 网格布局参考样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 60,
    paddingHorizontal: 20,
    backgroundColor: '#fff',
  },
  CardPad: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 12,
    justifyContent: 'space-between',
    marginBottom: 30,
  },
  cardBtn: {
    // 4列网格设置宽度为23%即可，3列可调整为30%
    width: '23%',
    aspectRatio: 1,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  cardText: {
    fontSize: 24,
    fontWeight: '600',
  }
})

注意：React Native中所有文本内容必须包裹在Text组件内，不能直接把字符串、数字放在View或TouchableOpacity下，否则也会触发渲染报错。

内容的提问来源于stack exchange，提问作者ubermo