如何在React Native中从数组动态创建<Text>组件并实现切换显示

以React/React Native为例，核心思路是用状态管理当前显示项的索引，点击按钮时更新索引并实现循环切换：

1. 基础准备与数组定义 #

import { useState } from 'react';
// 若是React Native，需额外引入对应组件
// import { Text, Button, View } from 'react-native';

const DATA_Section = [
  {
    id: 0,
    text: "Some text1",
  },
  {
    id: 1,
    text: "Some text2",
  },
  {
    id: 2,
    text: "Some text 3",
  },
];

2. 组件实现与核心逻辑 #

function DynamicTextComponent() {
  // 初始化索引为0，对应数组第一项
  const [currentIndex, setCurrentIndex] = useState(0);

  // 点击按钮时更新索引，取模运算实现循环
  const toggleText = () => {
    setCurrentIndex(prev => (prev + 1) % DATA_Section.length);
  };

  return (
    <div> {/* React Native替换为<View> */}
      {/* 渲染当前索引对应的文本 */}
      <Text>{DATA_Section[currentIndex].text}</Text>
      {/* 切换按钮 */}
      <Button onClick={toggleText} title="切换文本" />
      {/* React Native的按钮写法：<Button onPress={toggleText} title="切换文本" /> */}
    </div>
  );
}

export default DynamicTextComponent;

关键逻辑说明 #

• 用useState维护当前显示项的索引，初始值设为0，确保默认展示数组第一项。
• 点击按钮时，通过(prev + 1) % 数组长度计算新索引：当索引走到数组最后一项后，加1取模会自动回到0，实现无缝循环。
• 直接通过DATA_Section[currentIndex].text获取当前要显示的文本，渲染到<Text>组件中即可。

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