如何用React Native或JavaScript实现00-99数字表格列表逻辑？

一、纯JavaScript（网页端） #

直接通过DOM操作生成10×10的数字表格，核心是把0-99的数字格式化为两位数，再按每10个一行拆分：

<!DOCTYPE html>
<html>
<body>
  <div id="numberTable"></div>

  <script>
    // 生成00-99的格式化数字数组
    const numbers = Array.from({ length: 100 }, (_, i) => i.toString().padStart(2, '0'));
    const table = document.createElement('table');
    
    // 每10个数字为一行构建表格
    for (let i = 0; i < numbers.length; i += 10) {
      const row = document.createElement('tr');
      const rowNumbers = numbers.slice(i, i + 10);
      rowNumbers.forEach(num => {
        const cell = document.createElement('td');
        cell.textContent = num;
        // 基础单元格样式
        cell.style.padding = '8px 16px';
        cell.style.border = '1px solid #ddd';
        row.appendChild(cell);
      });
      table.appendChild(row);
    }
    
    // 挂载表格并设置样式
    document.getElementById('numberTable').appendChild(table);
    table.style.borderCollapse = 'collapse';
  </script>
</body>
</html>

关键细节：

• *padStart(2, '0')* 用来把单个数字补成两位数，比如5变成"05"
• 循环时每10个数字创建一行，保证表格是标准的10行10列结构

二、React Native 实现 #

在React Native里可以用两种常用方式实现，分别是flexWrap布局和FlatList组件：

写法1：flexWrap 流式布局 #

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

const NumberTable = () => {
  // 生成格式化后的数字数组
  const numbers = Array.from({ length: 100 }, (_, idx) => idx.toString().padStart(2, '0'));

  return (
    <View style={styles.container}>
      {numbers.map(num => (
        <Text key={num} style={styles.numberItem}>{num}</Text>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    padding: 10,
  },
  numberItem: {
    width: '10%', // 每行10个，每个占10%宽度
    textAlign: 'center',
    paddingVertical: 12,
    borderWidth: 1,
    borderColor: '#eee',
  },
});

export default NumberTable;

写法2：FlatList 组件实现 #

import React from 'react';
import { FlatList, Text, StyleSheet } from 'react-native';

const NumberTable = () => {
  const numbers = Array.from({ length: 100 }, (_, idx) => ({
    id: idx.toString(),
    value: idx.toString().padStart(2, '0')
  }));

  const renderItem = ({ item }) => (
    <Text style={styles.numberItem}>{item.value}</Text>
  );

  return (
    <FlatList
      data={numbers}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      numColumns={10} // 指定每行固定显示10个
      contentContainerStyle={styles.container}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
  numberItem: {
    flex: 1,
    textAlign: 'center',
    paddingVertical: 12,
    borderWidth: 1,
    borderColor: '#eee',
  },
});

export default NumberTable;

关键细节：

• 两种写法都依赖*padStart(2, '0')*完成数字的两位数格式化
• flexWrap布局通过宽度占比控制每行数量，FlatList直接用numColumns属性更省心，适合后续扩展分页等功能

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