React Native -对象的映射数组
React Native是一种基于JavaScript的开源框架，用于构建跨平台移动应用程序。它允许开发人员使用React的语法和组件模型来创建原生iOS和Android应用。React Native使用一种称为"对象的映射数组"的概念来管理应用程序的界面和交互。
对象的映射数组（Array of Mapped Objects）是指一个数组，其中的每个元素都是一个包含数据和视图的对象。每个对象都映射到应用程序界面上的一个可视组件，并且可以随着数据的变化而自动更新。这种模式允许开发人员使用JavaScript来描述应用程序的用户界面，而无需直接操作底层的UI组件。
React Native的对象的映射数组具有以下优势和特点：
- 跨平台开发：React Native可以使用相同的代码库构建原生iOS和Android应用，大大简化了跨平台开发的工作量。
- 高性能：React Native利用了底层原生组件，使应用程序具有接近原生应用的性能和响应能力。
- 热更新：React Native支持热更新，可以在不重新安装应用程序的情况下快速更新应用程序的界面和功能。
- 灵活的用户界面：通过对象的映射数组，React Native提供了灵活且可组合的UI组件，开发人员可以根据需要自由组合和定制界面。
- 强大的生态系统：React Native拥有庞大的开发者社区和丰富的第三方库支持，可以轻松集成各种功能和扩展。
React Native的应用场景非常广泛，适用于各种移动应用程序的开发，包括社交媒体应用、电子商务应用、新闻和娱乐应用、工具类应用等。
腾讯云提供了一些与React Native相关的产品和服务，包括：
- 云开发：腾讯云云开发是一种基于Serverless架构的云端一体化开发平台，可与React Native无缝集成，提供数据库存储、云函数、云存储、云调用等功能，加速开发和部署过程。了解更多：腾讯云云开发
- 移动推送：腾讯云移动推送服务可以帮助开发人员实现消息推送、通知管理等功能，与React Native集成后可以实现即时通知和消息推送。了解更多：腾讯云移动推送
- 移动混合调试器：腾讯云移动混合调试器是一款用于调试React Native和Weex应用的调试工具，可帮助开发人员快速定位和修复问题。了解更多：腾讯云移动混合调试器 请注意，以上只是腾讯云提供的一部分相关产品，还有更多产品和服务可以根据具体需求选择使用。
总结：React Native是一种用于构建跨平台移动应用程序的开源框架，使用对象的映射数组来管理应用程序的界面和交互。它具有跨平台开发、高性能、热更新、灵活的用户界面和强大的生态系统等优势。腾讯云提供了与React Native集成的产品和服务，如云开发、移动推送和移动混合调试器。
相关·内容
1回答
我已经创建了一个react本机表组件，它为某些数据调用api。当我试图在render方法中显示数据时，我会得到一个错误：
undefined is not a function (near '...data.map...')
- node_modules\react-native-table-component\components\rows.js:17:6 in Row#render
我能够使用静态数据显示数据，只有当我尝试使用api中的数据时才会发出问题，请参阅下面的代码：
import React, { Component } from 'react';
浏览 5提问于2020-05-17得票数 0
回答已采纳
1回答
我想使用一个映射函数来显示标签，但是我在TypeError中得到类似"Cannot read property ' label‘of undefined“的错误：”Cannot read property 'label’of undefined“
我使用单选按钮-react-native来做这件事。它有一个选项: data，它接受一个数据数组。这就是它的工作原理。因此，对于我的代码，正确的方法是执行此data = {data}。我之所以要使用map函数，是因为我想从我的服务器端获取数据。而且看起来什么都不管用
import * as React from '
浏览 1提问于2021-07-20得票数 0
1回答
大于1的数据大小存在呈现问题。
、、、、
工作数据如下(我使用JSON.stringify函数查看数据的外观) {"_id":"612e60c4ce136a1f4454c938“、"individualPurchasePrice":9800、"teamPurchasePrice":640、"eventDealCategory":"DysonHairDryer"}
以下是未起作用的数据{"_id":"612e60c4ce136a1f4454c938“、"individualPurchasePrice":9800
浏览 9提问于2022-02-18得票数 0
据我理解，迭代数据列表最常用的方法是map，它是一种遍历数组的数组方法，但是当我试图在这里应用它时：
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';
class QuestionList extends Component {
state = { questions: [] };
componentWillMount() {
axios
.g
浏览 0提问于2018-05-13得票数 0
回答已采纳
1回答
我刚开始使用Flow，在使用它扫描React Native项目后，我收到了一堆错误：
Error --------------------------- node_modules
Missing type annotation for `U`.
v--------------------------
353| return range.map(function(value) {
354| if (typeof value !== 'string') {
355| return val
浏览 1提问于2018-05-26得票数 3
我正在使用React Native中的fetch命令从Github api中提取一些信息。
我有一个仪表板，它应该显示json信息：
class Dashboard extends React.Component{
render(){
return(
<View style={styles.container}>
<Text> This is the dashboard </Text>
<Text> {this.props.userInfo} </Text>
<
浏览 3提问于2016-09-16得票数 1
回答已采纳
3回答
我有一个包含以下内容的JSON对象：
[{
"type": "pdf",
"size": "1mb",
"date": "392017",
.....500 more key value pairs like this
}]
这就是我在React Native中在屏幕上显示上面的JSON对象的方式。
export const MyComponent = ({myJson}) => {
const data = Object.entries(myJson)
浏览 16提问于2017-03-10得票数 1
回答已采纳
1回答
我正在尝试创建一个显示自定义组件列表的视图。这是非常基本的，但是在加载组件之后列表是空的。 该组件的定义如下。 import React, { Component } from "react";
import { Text, View, Image } from 'react-native';
import { Container, Icon } from 'native-base';
export default class PlaceVoting extends Component {
render() {
retur
浏览 8提问于2019-02-25得票数 1
回答已采纳
? 我正在尝试使用react导航和react-native-dropdown，以便在头文件中有一个下拉列表，以更改下面视图中呈现的内容。 每当我尝试执行处理程序时，当react-native-dropdown尝试再次渲染并使用(this.props.data.map((rows，index) =>等)映射dropdown时，我收到错误消息"undefined is not a function (near‘...this.pros.data.map’)“。 下面是我使用的代码： import React, {Component} from "react"
浏览 131提问于2020-09-17得票数 2
下面是函数-
const setLoading = (value) => {
const messages = dashboards.data.message.filter((item) => {
const title = item.dashboardTitle || item.dashboardName;
return title.toLowerCase().startsWith(value.toLowerCase());
});
setFiltered(messages);
console.log(filtered);
浏览 28提问于2021-02-16得票数 0
我正在使用Axios对.NET核心API进行API调用，该调用来自一个。在一个屏幕上，我有类似的代码运行得很好，但是它在这里不能工作，并抛出一个错误：
[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'request.title')]
at node_modules\react-native\Libraries\Lists\FlatList.js:597:25 in renderer
at node_modules\react-native\Libraries\Lis
浏览 2提问于2022-08-27得票数 0
回答已采纳
1回答
我正在从一个库中读取代码，并遇到了这样的情况： return Animated.event([null, this.createAnimatedEvent()])(
event,
gestureState
) 该库使用： "react": "^16.0.0-beta.5",
"react-native": "^0.49.1" 我已经检查了该版本的Animated.event() API和源代码，它返回了空。 我怀疑这与PanResponder有关，因为gestureState参数，但从文档中无法将其联系在
浏览 17提问于2019-02-13得票数 0
回答已采纳
const data = {
apple: {
type: 'fruit',
image: './fruit/apple.jpg'
},
orange: {
type: 'fruit',
image: './fruit/orange.jpg'
}
carrrot: {
type: 'vegetable',
image: './vegetable/carrot.jpg'
}
}
我正在尝试构建一个搜索函数来遍历一个对象，以返回我需
浏览 0提问于2018-08-09得票数 0
地图跟踪用户在iOS上的位置，而不是安卓上的位置。用户的位置显示在地图上，“我的位置”按钮也能正常工作。
对于Android来说，不跟踪位置有什么问题呢？
<MapView
style={styles.map, { flex: 1, marginBottom: this.state.marginBottom }}
onMapReady={this._onMapReady}
initialRegion={initialRegion}
showsUserLocation={true}
followsUserLocation={true}
showsMyLocation
浏览 1提问于2018-11-26得票数 2
回答已采纳
1回答
我刚接触react native，并试图将一些数据显示到react组件(最好是卡片)中，但现在FlatList可以工作。我无法对数据进行结构分析和显示。应该怎么做呢？ import React,{useState,useEffect} from 'react';
import { StyleSheet,Modal, View ,Text , ScrollView, Alert} from 'react-native';
import {IconButton ,Appbar, Card, TextInput ,Button ,
} from 'r
浏览 21提问于2021-01-09得票数 0
回答已采纳
在我用Android安装的中，我使用redux--持久化来持久化状态，存储引擎是AsyncStorage。在应用程序中，我有一个“添加”按钮和一个“删除”按钮，它从状态中添加和删除一个项目。
“添加”按钮工作正常，它将一个项添加到状态，屏幕将被重新呈现。但是'remove‘按钮从状态中删除了一个项目(我在上看到了它)，它不会重新呈现屏幕并保持状态。但是不同版本的代码起作用。
我想知道为什么以前的版本不起作用。这是我的还原机功能：
//reducer.js
import React from 'react';
const initialState = {
ke
浏览 1提问于2020-09-20得票数 0
回答已采纳
我对原生反应是全新的，我不知道这是不是正确的方式。我使用的是@react-native-community/checkbox的checkbox组件。我正在从API获取一组服务。在该APi中，默认情况下我将获取isCheked = false。当我点击复选框时，它工作正常，而当我取消复选时，它就不工作了。我不知道我错在哪里。 import React, {useState, useEffect} from 'react';
import {Text, View, Picker, ScrollView, TouchableOpacity} from 'react-nati
浏览 24提问于2021-03-19得票数 1
回答已采纳
有人使用了反应本机调制模块吗？
react-native-modalize模块，当我在flatListProps对象上呈现代码时，它会显示下面的错误！！
下面是的例子
import React, { useRef } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Modalize } from 'react-native-modalize';
export const App = () => {
cons
浏览 2提问于2021-01-21得票数 0
2回答
无法读取未定义映射的属性
、、、、
import React from 'react';
import { Card, Text } from "react-native-paper";
import {
SafeAreaView,
} from "react-native";
class Hnews extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
isLoaded: false,
};
}
浏览 1提问于2021-12-30得票数 0
回答已采纳
请考虑React本机中的以下代码：
import React, { useState } from 'react';
import { Text, View } from 'react-native';
export default function App() {
const [recommendations, setRecommendation] = useState<any[]>([]);
return (
<View>
{recommendations != [] ?
(
浏览 5提问于2020-06-04得票数 0
回答已采纳
运行yarn test时出现以下错误 lerna ERR! yarn run test:unit stderr:
FAIL id-check-front src/tests/App.test.tsx
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
浏览 9提问于2021-04-30得票数 0
回答已采纳
1回答
我试图配置在android中运行一个react本机项目，启动节点js并准备运行我运行的“构建”
cd android & ./gradlew && cd .&&反应-本地启动
在另一个终端，我运行
react本地运行-android
我的package.json：
"react-native": "0.59.0",
"react-native-maps": "git://github.com/react-native-community/react-native-maps.git#maste
浏览 4提问于2019-10-09得票数 0
回答已采纳
1回答
我目前有一个用JSON返回对象数组的api。 Array [
Array [
Object {
"created_at": "2020-06-29T22:16:51.000000Z",
"id": 2,
"list_id": 2,
"lists": Object {
"created_at": "2020-06-29T22:16:51.000000Z",
"id": 2,
浏览 11提问于2020-07-17得票数 0
rq.js
}).then((responseData) =>{
this.setState({
user:responseData.name,
user1:responseData.blood,
user2:responseData.location,
loaded: true,
})
如果我的native.It响应不是array.What更改，那么这是我在react中的代码，如果JSON是一个数组，我需要在这段代码中进行完美的工作吗?显示这个错误Unexpe
浏览 6提问于2017-11-08得票数 1
我在下的一个组件中有两个按钮。即使它正在发送操作并更新存储，App也不会重新呈现。理想情况下，在按下按钮时，我会添加一些将放在数组中的虚拟名称，然后根据数组中的数字项呈现一个不同的组件。
有人能告诉我出了什么问题吗?我是个反应和反应的初学者。
沙箱：
App.jsx
import React from "react";
import "./styles.css";
import { Panel } from "./Panel";
import PanelAdder from "./PanelAdder";
import { use
浏览 2提问于2022-07-21得票数 0
回答已采纳
屏幕上未显示任何内容。不知道为什么会这样，任何地方都没有错误。想知道为什么屏幕上什么都没有显示。从API中正确获取数据。代码如下：
import React, { Component } from 'react';
import { StyleSheet, ScrollView, TouchableOpacity, Text, View } from 'react-native';
import { Container, Content, Grid, Row, Col } from 'native-base';
import axios from
浏览 1提问于2018-10-16得票数 3
好的，我从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
我刚接触React-native，不知道如何映射这个JSON： {
"Category Title": {
"data": [
{
"id": 34,
"name": "Blanditiis",
"price": "10.30"
},
{
"id"
浏览 20提问于2020-07-06得票数 0
回答已采纳
我是新来的-土生土长。我正在尝试使用react导航5来实现导航。我有两个屏幕--主页和配置文件。这两个组件都收到了一个导航支柱，但打字记录给我带来了错误。
Binding element 'navigation' implicitly has an 'any' type.ts(7031)
如何消除这个错误。
提前谢谢你
注-我使用的是打字本
App.tsx
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigati
浏览 0提问于2020-07-28得票数 16
回答已采纳
在打印日志时，我使用“支持类型”将颜色十六进制代码字符串传递给一个组件，传递的道具给我的结果是正确的，但是当我应用十六进制代码字符串进行样式设置时，它不会反映到UI中。
Index.js
import Logo from './Logo';
import styles from './styles';
export { Logo, styles,};
Logo.js
import React from 'react';
import PropTypes from 'prop-types';
import { Vi
浏览 2提问于2017-09-13得票数 0
回答已采纳
我有一个字符串名称标记，我通过道具将它从'Main‘组件传递到' Details’组件，并希望使用该标记字符串在细节的呈现函数中使用，如
在'Details‘的呈现函数中尝试了这一点，但没有工作。
render() {
const Tagname = this.props.navigation.getParam('component', 'Component Does not exist')
return (
<Container>
<Tagname/>
&l
浏览 0提问于2019-04-25得票数 0
回答已采纳
1回答
我想实现来自的react-原生映射。但是，当我在上面的MapView上使用代码App.js导入import MapView from 'react-native-maps';时，我得到了以下错误：
如果需要未知模块“未定义”.If，您可以确定模块在那里，请尝试重新启动Metro。您还可能希望运行yarn或npm install (取决于您的环境)。
我的package.json是
{
"name": "MyNewProject",
"version": "0.0.1",
"private&
浏览 0提问于2018-03-31得票数 3
回答已采纳
我一直在尝试导入Json文件，然后在React Native应用程序中浏览和显示它。我正在学习React Native，同时也在学习Javascript。
import React, { Component } from 'react';
import {
Text,
View,
AsyncStorage
} from 'react-native';
import{eventos} from './Events';
export default class Admin extends React.Component{
浏览 1提问于2020-04-02得票数 0
我在react原生中有一个book对象，我想使用useState react钩子在我的组件中使用这个对象，但我得到了一个错误消息：“错误:对象作为React子对象无效(找到:具有键的对象{pages，title})。如果您打算呈现一个子对象集合，请改用数组。” 这是我的图书类： export class Book {
pages: number;
title: string;
constructor(pages: number, title: string) {
this.pages = pages;
this.title = title;
}
} 下面是我
浏览 50提问于2020-07-28得票数 0
尝试在react本机中使用fetch并获取 Unable to symbolicate stack trace: Requiring module "node_modules\react-native\Libraries\Network\fetch.js", which threw an exception: TypeError: Attempted to assign to readonly property.
Unable to symbolicate stack trace: undefined is not an object (evaluating '_$
浏览 105提问于2020-03-26得票数 1
回答已采纳
我从django服务器获得列表响应。这就是responseJson.bill的样子
[
{"ch": 0, "day": 9, "de": 0, "dr": 0, "en": 0, "etc": 1600, "id": 111, "ja": 0, "joy": 0, "ko": 0, "location": "경기 부", "month": 6, "mt": 0, &#
浏览 10提问于2022-06-09得票数 0
2回答
在renderItem属性中，item周围的大括号有什么作用？我试着像这样传递它
renderItem={ item => <Text style={styles.item}>{item}</Text>}
但它似乎不起作用。请指导我这方面的工作。
//Code snippet from React Native docs as below.
//url: https://facebook.github.io/react-native/docs/using-a-listview
import React, { Component } from 'react
浏览 0提问于2019-11-08得票数 2
我正在构建一个小的反应路由应用程序，以便更好地了解它是如何工作的。我的App.js的基本路由如下所示：
import React from 'react';
import './App.css';
import Nav from './Nav';
import About from './About';
import Shop from './Shop';
import CountryDetail from './CountryDetail'
import { BrowserRouter as Ro
浏览 2提问于2020-04-15得票数 0
回答已采纳
我正在尝试将API数据呈现到页面上，但是得到这个错误--未定义的不是函数(接近‘...movies.map.’)--如何在页面中标记我的结果？为什么在movie.title中给我红色的错误？
import { StatusBar } from 'expo-status-bar';
import React ,{useState,useEffect} from 'react';
import {ActivityIndicator, FlatList, Text,View} from 'react-native'
import MovieBox fr
浏览 12提问于2022-09-26得票数 -1
回答已采纳
2回答
我想根据所选的值从下拉查询电影中进行选择，通过map并在一个react组件中呈现它们，但是我得到了这个错误。
必须返回有效的React元素(或null)。您可能已返回未定义的数组或其他无效对象。
下面是代码：
...
constructor(props) {
super(props)
this.state = { description: '', list: [] }
}
handleList() {
axios.get('https://facebook.github.io/react-native/movies.json')
浏览 2提问于2018-01-14得票数 0
回答已采纳
官网提供的CheckBox仅支持Android。 我们如何在iOS和Android都支持的react-native中实现checkbox？
浏览 14提问于2019-05-01得票数 1
我正在尝试在我的react本机项目的主目录中获取文件名。我用“反应-本地-fs”来做这件事。
这是我的密码；
const getFileNames = () => {
const path = FS.DocumentDirectoryPath;
console.log(path);
};
也不能给我App.js，index.js，.它给了我这个结果；/data/user/0/com.mrkennedy/files
版本；
"react-native": "0.62.2",
"react-native-fs": "^2
浏览 1提问于2020-05-04得票数 4
回答已采纳
我进入了Debug远程JS模式，这导致了react本机-恢复包的一些错误，我在这里发现，如果我升级到2.4.1版本，它会工作，所以我做到了，它工作了，但我收到了一个警告，这个版本是不兼容的，我的应用程序可能不能像预期的那样工作。因此，我删除了node_modules，并在package.json中将它从2.4.1重命名为2.3.1。
一开始，我在安装它时遇到了很多麻烦，因为“世博安装”正在从app.config.ts中抛出错误，因为我在那里使用了dotenv，由于某种原因我无法安装它。一开始npm安装也失败了，但是第二次安装了所有的软件包，但是我仍然从模拟器那里得到错误。当我在设备上打开应用程
浏览 17提问于2022-03-11得票数 1
回答已采纳
我有一个简单的组件，它使用react表显示一个表。使用useState作为默认的模拟数据集，它可以很好地呈现，并且在使用文本框中的变量数据调用api时，我得到状态200和返回的适当数据。我遇到的问题是，我的useTable代码部分在包含useState返回数据的useState一开始就在运行。useState是异步的，因此此时返回未定义为尚未解决的承诺。我读到了只有在useState被完全解决后才能做一些事情的解决方案，那就是使用useEffect，但是由于useTable是一个钩子，所以我不能在钩子中有一个钩子，我到底要做什么！
代码：
import { CallApi } from
浏览 6提问于2022-09-13得票数 0
我是一个使用React-native的新手，我试图让我的代码命中特定的API，然后显示从返回的JSON中返回的一段信息，但是由于某些原因，从这个api返回的JSON不能工作，即使它在其他api上工作。我已经挣扎了几天了，我只是有点迷惑。有人能告诉我我哪里做错了吗？
import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, View} from 'react-native';
import axios from 'axios';
export de
浏览 0提问于2018-05-18得票数 2
1回答
新手的问题，我得到了以下代码的TypeError: Cannot read properties of undefined (reading 'id')。我的道具传得对吗？为什么这个值是未定义的？我的getValues按钮返回一个空列表，该列表的length属性为0，那么为什么在创建并传递给子组件时这是未定义的呢？
InputScreen.js
import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { View, StyleShee
浏览 3提问于2022-01-15得票数 1
回答已采纳
我试图在我的React本机应用程序中循环一个嵌套数组。
我试过使用for循环，但这不起作用。我还没反应过来，所以我不太熟悉如何循环
现在我要做的是只在newRow数组的每个对象中显示来自row的数据
使用{ item.newRow[0].name }确实有效，我想循环槽newRow来显示所有的newRows
如何循环遍历所有行并显示所有newRows？
示例数组：
{
id: 0,
text: 'View',
newRow: [
{id: 0, text: 'View'},
{id: 1, text: 'Te
浏览 0提问于2019-01-27得票数 4
回答已采纳
1回答
这需要什么语法？
、、
我对import和require的一些语法有些困惑。有时我会看到这样的语法：
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
这意味着什么--在本例中，react-native被放入React变量，然后var { ...} = React意味着我们只选择那些要在项目中使用的组件？
有时，我还会看到以下语法：
import {
Animated,
View,
Text,
} from 'react-native&
浏览 2提问于2017-05-11得票数 2
回答已采纳
目标：用于显示用户从DatePicker中选择时间的时间列表。
问题：它只显示一个时间，而不是时间列表。
我可以从数据报警器中选择时间。当我单击ok时，所选的时间显示在平面列表上。然而，在选择一个新的时间，旧的时间会被取代。这只会在列表中显示1次。
我在下面添加了应用程序的截图。
因此，对解决这一问题的任何帮助都将不胜感激。
代码片段如下：
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, FlatList } from
浏览 2提问于2019-12-19得票数 0
回答已采纳
我已经设法让控制台在按下按钮时输出一个文本。但是，我也希望每次单击都会增加一个名为nClicks的全局变量的值，但一直在努力做到这一点。这是我的代码：
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
浏览 2提问于2015-04-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
