如何使用数组作为文本源在 React Native 中动态创建文本？答案

【问题标题】：How do I dynamically create text in React Native using an array as the text source?如何使用数组作为文本源在 React Native 中动态创建文本？
【发布时间】：2018-01-08 07:46:28
【问题描述】：

我想根据预先制作的文本数组创建 8 行文本。例如

const someInfo = [“手机”、“餐厅”、“电视频道”、“音乐”、“健康”、“Wifi”、“房地产”、“聚会”]；

从那里只是一个简单的

export default class User extends Component{
    render(){
        return(
            <View style={styles.mainBoxes}>
                <Text style={styles.mainBoxesText}>{textfromArrayHere}
                </Text>
            </View>

        );
    }
}

我将如何遍历该数组并动态插入文本？

【问题讨论】：

标签： arrays react-native text

【解决方案1】：

考虑你的数组是someInfo，用简单的方法：

<View style={styles.mainBoxes}>
  {someInfo.map(info => <Text>{info}</Text>)}
</View>

记住：我只是举个例子=>你用你自己的方式来设计

更酷的方式 => 使用官方 FlatList 和 renderItem 道具以及 info => <Text>{info}</Text): https://facebook.github.io/react-native/docs/flatlist.html

【讨论】：

感谢您的快速回复！

【解决方案2】：

在您的标签内添加以下代码行。记住 map 很容易在对象数组甚至简单数组上工作。

{someInfo.map(info) => {{info}}}

希望对你有帮助

【讨论】：

【解决方案3】：

我很清楚你需要什么。基本上你不想在凌乱的页面和逻辑的行代码中添加文本。您宁愿拥有一个“数据库”或一个页面，您可以在其中找到为您组织的所有内容。您可以在其中轻松更改文本并保存此页面，它会在应用程序中找到自己的方式并自行更改。

您必须使用 OBJECT 或 ARRAY 并从中调用。

首先，创建一个页面并调用它（例如：DynamicText.js）

以类似的方式添加您的数据：-

如果您想使用 ARRAY .. 执行以下操作：-

export const someInfo = [
{ 
"Text": "Mobile Phones" // This is what we want to PUSH ! 
},
{ 
"Text": "All copy rights reserved"
},
{ 
"Text": "Mobile Phones"
},
];

然后，转到您想要添加此动态页面的屏幕。

然后在上面导入代码

import someInfo from '../data/DynamicText';

最后，这就是您渲染文本或从数组中调用文本的方式，而不用太麻烦。

{someInfo[0].text}

所以基本上通过它里面就完全一样了。

就是这样！数字 [0] 按顺序排列。

在你的代码中使用它：-

export default class User extends Component{
    render(){
        return(
            <View style={styles.mainBoxes}>
                <Text style={styles.mainBoxesText}>{someInfo[0].text}
                </Text>
            </View>

        );
    }
}

更好的方法是使用 OBJECT，因为它都是关于“TEXT”的！

要制作一个对象，您基本上可以执行以下操作：-

export const someInfo = {
      heading: " This is the heading Text", 
      subtitle: "This is the subtitle Text", 
      comment: "the pizza is delicious" 
    },

并且在代码中使用非常简单。

{someInfo.heading}

愉快的编码！

【讨论】：