在React Native中呈现文本中的对象项
，可以通过使用Text组件和模板字符串的方式来实现。模板字符串是一种特殊的字符串，可以在其中插入变量或表达式。
首先，我们需要将文本中的对象项提取出来，并将其存储在一个变量中。然后，我们可以使用Text组件来呈现文本，并在其中插入对象项的值。
以下是一个示例代码：
import React from 'react';
import { Text } from 'react-native';
const data = {
name: 'John',
age: 25,
occupation: 'Developer'
};
const App = () => {
const { name, age, occupation } = data;
return (
<Text>
My name is {name}, I'm {age} years old, and I work as a {occupation}.
</Text>
);
};
export default App;在上面的代码中，我们首先定义了一个包含姓名、年龄和职业的对象data。然后，我们在App组件中使用解构赋值将对象项提取为单独的变量。最后，我们使用Text组件来呈现文本，并在其中插入对象项的值。
这种方法可以用于在React Native中呈现文本中的任何对象项。你可以根据实际情况修改data对象和文本模板。
腾讯云相关产品和产品介绍链接地址：
- 云开发：https://cloud.tencent.com/product/tcb
- 云函数：https://cloud.tencent.com/product/scf
- 云数据库：https://cloud.tencent.com/product/tcb-database
- 云存储：https://cloud.tencent.com/product/cos
- 云网络：https://cloud.tencent.com/product/vpc
- 人工智能：https://cloud.tencent.com/product/ai
- 物联网：https://cloud.tencent.com/product/iotexplorer
- 区块链：https://cloud.tencent.com/product/baas
- 元宇宙：https://cloud.tencent.com/product/tencent-meta-universe
相关·内容
这是一个常见的问题，但不知怎的，我已经尝试了我能找到的所有解决方案，但仍然收到了这个警告。
VirtualizedList: You have a large list that is slow to update - make sure your renderItem
function renders components that follow React performance best practices like
PureComponent, shouldComponentUpdate, etc. {"contentLength": 5200, "dt&#
浏览 20提问于2022-09-23得票数 0
好的，我从React Native开始，用谷歌搜索了我能做的主题：
index.ios.js：
var React = require('react-native');
var { AppRegistry } = React;
var MarvelsApp = require('./components/start');
AppRegistry.registerComponent('MarvelsApp', () => MarvelsApp);
start.js：
'use strict';
var React = re
浏览 0提问于2016-03-03得票数 1
1回答
我是一个初级的React Native用户，我想知道如何将数据列表存储在一个可以在屏幕上显示为文本的文件中？例如，我想根据一天存储不同的工作计划。那么，有什么方法可以存储一堆不同的固定时间表，并能够根据日期显示数据呢？我正在使用React Native和Expo。感谢您的帮助，谢谢！
浏览 52提问于2018-10-12得票数 0
回答已采纳
import{ React, useContext} from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer, useNavigation ,useRoute } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
im
浏览 3提问于2022-01-25得票数 1
回答已采纳
我创建了一个名为"CommonStyleGenerator“的组件，以生成具有诸如高度、宽度和bgColor等键的简单样式对象。我已经在组件中创建了文本字段，每当文本在任何文本字段中发生更改时，我都会使用更改的字段键调用onStyleChange，并且在父组件中存储更改后的值。
下面是CommonStyleGenerator.js组件代码：
import React, { useEffect, useState } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-nat
浏览 1提问于2021-01-26得票数 0
回答已采纳
1回答
我正在创建一个React中的ViewContainer，它只是作为一个一般背景，然后想要在其中放置一个文本组件。然而，文本并不是这样出现的。但是，当我将文本放置在ViewContainer的创建中时，它确实会出现。我希望ViewComponent是可泛化的，并且不希望它绑定到特定的文本中。
ViewContainer.js：
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
export default
浏览 0提问于2019-07-25得票数 1
回答已采纳
我刚开始响应本机，我只想检查函数返回语句中的console.log语句，但是当我检查控制台时，console.log的内容正在无限地打印在console选项卡中。有人能解释一下为什么会发生这种事吗？下面是我正在检查的代码，谢谢。
import * as React from'react';
import { Text, View } from 'react-native';
function ExportFile() {
var RNFS = require('react-native-fs');
return (
浏览 6提问于2022-07-29得票数 3
回答已采纳
我在react本机中创建了一个自定义钩子，在useEffect和useState中遇到了一个问题，导致了一个无限循环。
我制作了一个小吃来举例说明正在发生的事情：
import React, { useEffect, useState, useMemo } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
export default function App() {
const [testStateVariable, setTestStateVari
浏览 2提问于2022-05-03得票数 2
回答已采纳
2回答
我想知道如何确定消息呈现顺序？
起初，我以为它会使用createdAt Date对象来确定呈现，但它没有。
(如您所见，它没有按日期绘制(2019第一、2018年、2017年、2016年和2019年再次)
我想知道怎样才能先修正显示最新信息的顺序。我的初始消息数组看起来如下：
const [messages, setMessages] = useState([
{
_id: 'gdfsdfasdfasdfasdfas',
text: 'Test Test 2',
createdAt: new Date(Dat
浏览 3提问于2019-09-23得票数 1
回答已采纳
因此，对于Image in react-native，可以在StyleSheet中设置alignSelf，也可以在Image标记中使用resizeMode。用法有什么不同？
浏览 3提问于2016-02-14得票数 0
回答已采纳
1回答
在react-native-gifted-chat主页上，有一个包含文本、图像和视频的消息对象示例：
{
_id: 1,
text: 'My message',
createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
image: 'htt
浏览 0提问于2019-06-27得票数 0
作为一个本地新手，我正在为android开发一个应用程序。基本上，该应用程序使用户能够根据特定的搜索参数过滤数据库。
现在，我尝试将类组件转换为功能组件。该组件只是加载一个预先填充的(领域-)数据库，显示一个等待用户输入的搜索栏，根据用户的输入执行数据库查询并显示结果。
在“旧”版本中，数据库设置是在componentDidMount()期间完成的，现在我认为使用useEffect()挂钩可以完成这项工作，因为它可以代替componentDidMount()。但我发现，做所有的逻辑(实际上我想把它放进钩子里)“裸”而不带钩子，效果很好。
我对这种行为感到很困惑，因为我没想到它会以这种方式工作。
浏览 4提问于2020-02-05得票数 1
回答已采纳
我仍然不能理解React Native中的ref(和一般的React )。我使用的是函数组件。我有一个包含许多项的FlatList。如何为文本或视图组件等项中的对象创建引用？ <FlatList
data={data}
renderItem={({ item }} => {
<View>
... lots of other stuff here
<TouchableOpacity onPress={() => _editITem(item.id)}>
<Text ref={(a) => '
浏览 15提问于2019-09-25得票数 0
回答已采纳
2回答
我开始使用react-native，我遇到了一个文本居中的问题，这是一个非常简单的代码，但我不知道为什么它不能工作
我也在玩动画，我做的所有例子中没有一个不起作用
所以我有一个带有文本和样式的视图，带有flex应该足够了，但还不够
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class HomeView extends Component {
render(){
浏览 18提问于2019-07-21得票数 1
回答已采纳
2回答
我正在尝试重新修改{userNumbers}在ChildScreen中的内容。我设法在Home中添加了userNumbers状态，但是它并没有重新修改文本。
UserContext.js
import { createContext } from 'react';
export const UserContext = createContext(null);
Home.js
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack&#
浏览 0提问于2020-06-15得票数 1
回答已采纳
我想要了解为什么我的文本不能渲染，以及我如何才能让它工作
import React, { Component } from 'react';
import { View,Button,Text } from 'react-native';
export default class LiveApiData extends Component {
constructor() {
super()
this.state = {data:[]}
}
componentDidMount() {
fetch("<&
浏览 3提问于2021-06-02得票数 0
1回答
我知道这里还有其他的答案，但我找不到像我的应用程序的结构那样工作的答案。我使用他们的文档设置了我的应用程序Firebase身份验证，但是一旦它展示了如何创建持久登录，它就没有显示如何注销并重新呈现主屏幕。
这是我无法解决的警告：
警告:不能从其他组件的功能体内部更新组件。在本机代码:空在node_modules/@react-navigation/core/src/useNavigationCache.tsx:100:22，在node_modules/@firebase/webchannel-wrapper/dist/index.js:42:151，在Rb$argument_0，在本地代码:在
浏览 1提问于2021-07-26得票数 1
回答已采纳
3回答
请帮我解决一个问题。我不明白如何实现登录后重定向到主页。我需要刷新应用程序才能做到这一点。 在我的app.js中，我有一个常量isSigned，它从AsyncStorage中获取一个值，当它不是空的时候，应用程序应该呈现'home‘组件，但它没有 登录工作，我可以得到令牌，并可以保存到AsyncStorage。 app.js： import React, {useState, useEffect} from 'react';
import {ActivityIndicator, SafeAreaView, StyleSheet, Text, View} from &#
浏览 23提问于2021-05-04得票数 0
1回答
我正在尝试使用以下代码返回我的react本机应用程序中的以前的视图。
'use strict';
var React = require('react-native');
var {
AppRegistry,
Component,
StyleSheet,
Text,
View,
BackAndroid,
Navigator
} = React;
var HomePage = require('./HomePage');
class DetailsPage extends Component{
浏览 2提问于2016-02-25得票数 1
回答已采纳
2回答
将html实体转换为移动电话
、、、、
我有一个API，它返回包含一些HTML实体的文本，例如 。这在网络上处理得很好，并显示为空间，但在移动应用程序中，它被显示为具有值 的文本。我使用React Native，但我认为如果用Android或Ojbective-C编写代码，问题也会发生。在移动应用程序上显示HTML实体的一般方法是什么，就像它们在网络上显示的一样？
为了对字符串进行编码，然后对它们进行解码，我尝试了。它适用于一些示例，但对于 ，它不起作用。
谢谢:)
浏览 2提问于2017-09-28得票数 1
回答已采纳
在一个反应本机项目中，我正在使用react-native-camera-roll-picker。其想法是用户选择一个图像，标题更改为类似于"x selected“之类的内容。试着让这个和钩子一起工作。守则如下：
import React, { useState } from 'react';
import RNCameraRollPicker from 'react-native-camera-roll-picker';
import { Header } from './header';
import { Container, Cont
浏览 6提问于2019-10-19得票数 1
回答已采纳
我已经编写了一个由TextInput、按钮和FlatList组成的安卓应用程序。在TextInput中写入每个名称后，平面列表中将有一个项。项目标题将是TextInput内容，列表项旁边将有两个按钮和一个文本。一个按钮用于增加文本显示的数量1，另一个按钮用于减少文本显示的数量。这是我的代码：
import React, {Component} from 'react';
import {
View,
Text,
TextInput,
FlatList,
TouchableOpacity,
} from 'react-native';
imp
浏览 0提问于2019-10-25得票数 1
回答已采纳
2回答
我正在用react原生语言创建一个聊天应用程序，我想知道如何创建x个聊天箱。我已经构建了一个以消息内容作为输入的react-native组件(示例如下)，如何复制它并插入列表中的相关数据。
const myList = ["hello", "world"]
<MessageBox message={"message content here"} />
最后，我希望它等于这个：
<MessageBox message={"hello"} />
<MessageBox message={"worl
浏览 0提问于2021-03-30得票数 0
我正在尝试开发一个使用RNCamera的ReactNative应用程序，以及其他库，比如react-navigation。下面是我正在使用的依赖项及其版本： "@react-native-community/masked-view": "^0.1.10",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-camera": "^3.42.0",
"react-native-cli"
浏览 51提问于2021-01-18得票数 0
回答已采纳
1回答
我在列表项中使用React本机元素CheckBox，在平面列表中。
import React, { Component } from "react";
import { View, Text, StyleSheet, FlatList } from "react-native";
import axios from "axios";
import {
Button,
Container,
Content,
Header,
Body,
Left,
Right,
Title
} from "native-bas
浏览 1提问于2018-07-16得票数 1
回答已采纳
我有一个从firebase获得的列表，并使用SwipeListView在UI中显示这些值。
清单数据包括如下细节:硬币价格，购买硬币的数量，硬币的总成本作为价格，计数和数量。还有其他一些领域。
现在，我想对所有硬币进行汇总，并在文本字段中显示。但是我无法设定的聚合。
我尝试创建两个变量，并使用钩子设置这些变量，但将错误设置为
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the followin
浏览 1提问于2021-06-05得票数 0
回答已采纳
我使用的是react-native-offline模块。我的目的是在没有连接时显示一些错误。当网络关闭时，我正在使用withNetworkConnectivity显示一些红色文本。下面是我的代码：
import React from 'react';
import { View, Text } from 'react-native';
import { withNetworkConnectivity } from 'react-native-offline';
const ConnectionStatus = ({ isConnected })
浏览 0提问于2017-11-16得票数 1
我的react本机应用程序中有此类别筛选器组件。第一次加载此组件时，它不会滚动到给定的索引项(即3)。我检查了一下，函数scrollToIndex正在调用。但是在加载屏幕后，组件重呈现时才能正常工作。
为什么它没有在第一次加载屏幕时向下滚动？
import React, { useCallback, useRef } from 'react'
import { StyleSheet, TouchableOpacity, FlatList, View } from 'react-native'
import { Badge, Text } from 'na
浏览 9提问于2021-05-07得票数 6
回答已采纳
有这样的FlatList道具，可以将它粘贴到顶部- stickyHeaderIndices，但不能粘贴到底部。有没有办法用一些内置的React Native人员来做这件事？
浏览 0提问于2019-11-25得票数 0
我正在尝试从一个名为SectionList的json文件创建一个notes.json。基本上，notes json数组中的一个对象将对应于一个SectionList条目。我已经在notesData中加载了json数组。但是，当我尝试使用notesData作为SectionList的源代码时，我会得到错误：TypeError: undefined is not an object (evaluating 'props.sections.reduce')
这是我的代码：
import React from 'react';
import { Text, View,
浏览 1提问于2018-03-12得票数 2
回答已采纳
我正在学习React Native，并试图使用for循环和箭头函数显示一些动态数据。
我面临的问题，确切的数据不是显示在屏幕上，但在日志中，它是打印为循环数据。
这个代码有什么问题？因为我只能将49视为console.warn中的一个值。
码
import React, { Component } from 'react';
import { StyleSheet, View, Text, ScrollView, Platform, Alert } from 'react-native';
export default class MyApp extends
浏览 0提问于2021-03-18得票数 0
我正在开发一个react原生应用程序。我的项目中有一堆本地的SVG文件。我想使用我的自定义组件来渲染文本和SVG图像。 下面是我的自定义组件，用于呈现静态SVG文件的Text和Image： import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
export default MyComponent = ({svgFile, text}) => {
return (<View style={styles.line}>
浏览 146提问于2020-07-25得票数 0
1回答
我正在构建一个从API中获取内容的小应用程序，其中一些内容是HTML的，我愿意在HTML中显示它(基本标记，如B、I、P等等)。我尝试使用react-native-render-html，它还需要react-native-webview (我也安装了它)，但是当启动expo时，包括以下内容
import { HTML } from 'react-native-render-html';
我得到了以下错误：
无法从"node_modules\htmlparser2\lib\CollectingHandler.js"解析“./MultiplexHandler”的
浏览 5提问于2020-07-23得票数 1
回答已采纳
我想在我的React-Native DrawerNavigation中创建一个项目，它只是一个可点击的链接，可以打开用户的浏览器指向某个链接。
下面是主要代码：
文件：/src/routes/AuthorizedNavigator.js
import { createDrawerNavigator } from "react-navigation";
import type { NavigationContainer, NavigationState } from "react-navigation";
import { Linking } from "
浏览 0提问于2019-10-07得票数 0
我正在开发一个应用程序，它的一个部分包含了一个玩家列表。列表中的每一项都包含球员的名字，他/她拥有的积分和一个用来改变积分的IOS stepper。
每次我使用IOS stepper修改玩家的点数时，应用程序的状态都会根据该值进行更改。但是，包含玩家分数的文本不会被修改。render函数被调用，应用程序的状态没有变化，因此文本组件也应该改变。我发现当render函数被调用时，它会“跳过”List组件，所以它不会被渲染，也不会调用renderRow函数。
当我切换到TabBar的第二个选项卡，然后返回到第一个选项卡时，文本只显示当前玩家的分数。在这种情况下，将呈现List组件。
我认为这是一个非
浏览 5提问于2017-07-13得票数 1
1回答
今天，我想在react本地创建类似于表单的东西，它看起来像
这相当简单。我使用库作为单选按钮。但是，当我单击下一步按钮时，我想要更改按钮中的文本。我用了下面的代码。
import React, { useState, useRef } from "react";
import { StyleSheet, View, Button } from "react-native";
import RadioButtonRN from "radio-buttons-react-native";
export default function App
浏览 3提问于2021-06-28得票数 0
回答已采纳
我已经在中创建了动态表单--React本机，如果用户单击该按钮，它将在按钮上方添加新表单。用户点击按钮的时间，它会添加那么多的表单。我已经做到了，但我面临的问题，在文本更改。
问题是，当我开始输入表单时，它首先显示秒的分数值，然后变为空值。
下面的是我尝试过的代码
import React, { PureComponent } from 'react'
import {
Text,
View,
TextInput
} from 'react-native'
import { TouchableOpacity } from '
浏览 2提问于2019-08-07得票数 1
我有一个聊天信息列表，在我的应用程序中，新的项目被添加到底部。在添加新项时，我使用了来自另一个所以问题的一些代码，以使FlatList保持在底部，如下所示
<FlatList
data={messages}
renderItem={({item}) => <ChatMessage message={item}></ChatMessage>}
keyExtractor={(item, index) => index.toString()}
initialNumToRender={messages.length}
i
浏览 2提问于2018-08-21得票数 2
回答已采纳
1回答
Jest快照测试忽略了子样式
、、、、
我正在尝试为一个非常、非常简单的react-native组件编写一个简单的快照测试。但是，Jest使用的快照不包含组件的单个子级的任何样式或内容信息。 该组件是一个来自原生库的按钮，其中有一个图标。来源： import React, { Component } from 'react';
import { Button, Icon } from 'native-base';
export default class AddButton extends Component {
render() {
return (
<Button
浏览 21提问于2019-01-20得票数 0
回答已采纳
我有一个组件，让我们调用屏幕，它导入一个包含搜索结果的组件。屏幕中的方法循环遍历对象数组，并为每个对象实例化新的搜索结果组件并将它们存储在数组中。
我刚开始做出反应，所以我的问题是，使用new关键字创建类扩展组件的实例是正确的，还是有正确的反应方式？如果是这样的话，在屏幕类中呈现这些组件的正确方法是什么，就像我在下面的代码段中所做的那样，似乎没有什么效果。
Screen.js -我已经削减了文件，以显示我正在做的事情
import React, { Component } from "react";
import { Text, View } from "react-n
浏览 0提问于2018-06-12得票数 3
回答已采纳
2回答
我正在尝试创建一个react-native ListView来呈现Realm返回的结果。我一直在遵循我找到的关于react-native的ListView以及如何使用Realm的说明。
然而，我总是得到相同的错误：Objects are not valid as a React child (found: [object Results]). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the
浏览 15提问于2016-07-25得票数 4
回答已采纳
我完全是react native的初学者，现在我遇到了一个更新问题。我使用的是react-native-paper和typescript。
在我的应用程序中，我想要按一个按钮，然后文本字段应该会更改它的文本。
不知何故，问题出在按钮或调用的函数上，因为控制台中记录的总是"before: true after:true"或"before: false after:false"，但我期望的是"before: true after: false"或vice-versa
我还有一个没有显示的第二个文本视图。
也许有人能告诉我我哪里做错了？
我的index
浏览 2提问于2019-08-17得票数 1
当secureTextEntry为真时，有没有办法在react-native中改变textInput的样式？我想在隐藏文本中显示星号(*)而不是点。
浏览 1提问于2018-06-04得票数 4
我一直在尝试在React Native项目的样式指南中包含代码示例，但在不使用React Native尝试呈现标签的情况下，我在找到包含标签的方法时遇到了麻烦。
我希望模拟一些类似Stackoverflow的代码块，如下所示：
// Example code for implementing custom button:
<CustomButton
color="primary"
title="Submit"
/>
所以我中断的代码看起来像这样：
<View>
<Text>
// Example
浏览 18提问于2017-08-23得票数 0
我迁移我的博览会项目，以反应本地项目。我删除了世博，并尝试使用本机方式添加启动屏幕和推送通知，并添加字体没有世博。我还安装了不使用世博的本地方式的react导航。我使用android和Xcode运行这个项目。我有一些问题，但是我通过在我的package.json文件中修复一些包版本来修复它们，现在我得到了这个错误：
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See ... for details.
* Move data fetching code or side
浏览 11提问于2020-02-13得票数 2
回答已采纳
3回答
我有一个使用react-native制作的iOS应用程序。游戏类包含一个ListView组件。我在构造函数中设置了状态，并包含了一个dataSource。我现在有一个硬编码的数据数组，我将其存储在另一个状态属性(this.state.ds)中。然后在componentDidMount中，我使用cloneWithRows方法克隆this.state.ds作为视图的dataSource。就ListViews go而言，这是相当标准的，并且运行良好。代码如下：
/**
* Sample React Native App
* https://github.com/facebook/react-na
浏览 0提问于2015-07-31得票数 41
回答已采纳
2回答
我调用一个API，并接收一个包含<br />的文本的JSON响应
我这样做是为了用<br />标记拆分JSON，并将其存储在一个数组中：
render() {
...
var body = law.body;
const bodies = body.split('<br />');
this.setState({bodies: bodies});
...
}
然后，我尝试映射这个数组，将每个值放入一个Text标记中：
const bodyText = <View>
{this.state.b
浏览 1提问于2019-07-24得票数 0
回答已采纳
1回答
这里我试图做的是，在Picker值改变时，调用函数并尝试调用循环并绘制5个TextInput，但得到错误。请帮助纠正这个小错误，当我试图直接调用myloop数组时，它的值改变了它的生成错误，数组不能作为函数调用。 import * as React from 'react';
import { Text, View, StyleSheet, Alert, Picker } from 'react-native';
import { Constants } from 'react-native';
import { TextInput } fro
浏览 29提问于2019-02-21得票数 2
React Native和JavaScript新手在这里。目前，我有一个JavaScript数组，比如
var my_stuff = ['text', 'img src=some_img.jpg', 'moretext']
我可以通过简单地使用以下命令来呈现数组的内容
render(){
{my_stuff}
}
我会在我的应用上看到：
text
img src=some_img.jpg
moretext
但我如何能够渲染图像，因为它目前是硬编码的。有没有办法让我迭代我的数组，一次呈现一个元素，但事先检查它是否在开始时包含&#
浏览 1提问于2018-03-16得票数 0
我想要显示所有的依赖性，在设置应用程序上与相同的反应本机应用程序的第三方。React Native支持吗？
浏览 5提问于2018-08-23得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
