react-native :如何呈现状态
React Native是一种用于构建跨平台移动应用程序的开源框架。它允许开发人员使用JavaScript和React的语法来创建原生移动应用程序，同时可以在iOS和Android平台上运行。
在React Native中，状态是指应用程序的数据，可以是用户输入、网络请求的结果、组件之间的通信等。React Native提供了一种称为"状态管理"的机制，用于管理和更新应用程序的状态。
在React Native中，可以使用以下方法来呈现状态：
- 使用组件的state属性：每个React组件都有一个state属性，用于存储和管理组件的状态。可以使用setState()方法来更新状态，并触发组件的重新渲染。
- 使用props属性：可以通过父组件将状态作为props属性传递给子组件。子组件可以通过props属性访问和使用状态。
- 使用Redux或MobX等状态管理库：这些库提供了更强大和灵活的状态管理功能，可以帮助开发人员更好地组织和管理应用程序的状态。
React Native的状态呈现可以应用于各种场景，例如：
- 表单输入：可以使用状态来跟踪用户在表单中输入的数据，并在用户提交表单时进行处理。
- 网络请求：可以使用状态来跟踪网络请求的状态，例如请求是否成功、正在加载中、错误信息等。
- 应用程序导航：可以使用状态来跟踪当前活动的屏幕或导航栏的状态，并根据用户的操作进行相应的导航。
腾讯云提供了一些与React Native相关的产品和服务，例如：
- 腾讯云移动开发平台：提供了一套完整的移动开发解决方案，包括移动应用开发、测试、发布和运营等环节。
- 腾讯云移动推送：提供了消息推送服务，可以帮助开发人员向移动应用的用户发送推送通知。
- 腾讯云移动分析：提供了移动应用的数据分析服务，可以帮助开发人员了解用户行为、应用性能等信息。
更多关于腾讯云移动开发相关产品和服务的信息，可以访问腾讯云官方网站：https://cloud.tencent.com/product/mobile
相关·内容
1回答
我在react-native中实现Algolia搜索，如果我搜索某个keyword，我从不同的类别获得response，比如服装，电子产品等，我如何根据结果中的类别获得搜索结果中的方面列表。就像价格将是所有类别的共同大小将有时尚类，只有公羊将只为电子产品
浏览 0提问于2017-12-18得票数 0
显示了React Native的以下代码：
function getMoviesFromApiAsync() {
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(
浏览 1提问于2017-10-22得票数 1
回答已采纳
我正在尝试使用firebase在react原生上构建一个简单的身份验证应用程序。在App.js文件中，我使用useEffect钩子在我的应用程序中初始化firebase实例，并且还声明了一个函数，用于在用户登录或注销时更新本地状态(loggedIn)。当我尝试使用电子邮件和密码登录时，我可以显示注销按钮，但弹出以下警告消息：
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your
浏览 27提问于2020-03-02得票数 0
如何通过在expo中按下按钮来加载webview内容?我是否必须使用导航？ import * as React from 'react';
import { WebView } from 'react-native-webview';
import {View} from 'react-native'
export default function App(){
return (
<View>
<Button title={'CLICK'} onPress={()=> &l
浏览 41提问于2021-06-24得票数 0
我正在尝试刷新扁平列表中的特定单元格/行。如何在加载数据时仅刷新单个单元格。并在刷新后显示数据？
可以刷新react-native视图中的特定行吗？例如，我在<View/>中嵌套的一行中显示图像。
浏览 0提问于2019-03-25得票数 2
我是新接触react-native的。 我有两个按钮A和B……两个视图V1和V2....by默认V1是可见的，而V2是隐藏的。 如何实现 在按钮B上单击-使V2可见并隐藏V1 单击按钮A-使V1可见并隐藏V2
浏览 21提问于2019-05-22得票数 0
在我的React-Native应用程序中，我有一个通过跟随"“呈现每一行的ListView。在我的行中，我有两个自定义的TouchableHighlight组件。当我在我的行中按下"Delete“按钮时，我希望它替换整行或该行中的所有按钮组件，并显示一个文本组件，显示"This item has Delete”。
有谁知道如何做到这一点吗？我不确定如何将子组件的onPress方法(删除按钮)链接到父组件(行)，并让行将其内容替换为文本组件。
浏览 5提问于2017-07-25得票数 0
回答已采纳
这是我的代码。我想在列表的顶部添加一个新的费用项目。我希望得到一些帮助，告诉我如何在列表的顶端创建新的费用。我一直得到相同的错误:太多的重新渲染。React限制渲染的次数，以防止无限循环。我该如何解决这个问题呢？
import React, { useState } from "react";
import { Text, View, ScrollView } from "react-native";
import NewExpense from "../NewExpense";
import {
selectTitle,
selectP
浏览 1提问于2021-09-06得票数 0
我希望在发生onPress事件时动态创建并使用该按钮。向好朋友寻求帮助。 我想{在屏幕上有一个按钮，->按钮点击->创建一个按钮->，这样我们就有了两个按钮} 这是我的代码 import React, { Component } from 'react'
import { Button } from 'react-native'
const Test = () => {
return(
<Button title='test' onPress={<Button title='
浏览 8提问于2021-01-11得票数 0
回答已采纳
在常规React中，有一种方法可以使用顶级接口ReactDOM.render()强制重新呈现无状态功能组件。
有没有办法在react-native中强制重新呈现无状态功能组件？
浏览 16提问于2017-02-13得票数 1
可能是一个简单的问题，有一个简单的答案，但我搞不懂。归咎于热度。我的模拟器打印‘这是一个测试’在屏幕上，当我希望它说‘改变’。我做错了什么？
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Template from './src/components/Template';
export default class App extends React.Component {
constructor(props)
浏览 1提问于2018-07-12得票数 1
回答已采纳
我使用的是世博会MapView，当我尝试更改onRegionChange中指定区域的值时，地图会返回到以前的位置。如何解决这个问题？
import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera, Permissions } from 'expo';
import {
Location,
MapView,
Marker
} from &
浏览 1提问于2019-02-22得票数 0
1回答
我有一个反应本地应用程序，我正在工作。现在我想让它有两种观点。登录页和主页。到目前为止，情况如下：
index.ios.js
import React, { Component } from 'react';
import {
AppRegistry,
Dimensions,
StyleSheet,
Text,
TextInput,
Button,
TouchableHighlight,
View
} from 'react-native';
import Scanner from './app/components/Sc
浏览 2提问于2017-04-12得票数 0
我刚接触react native，有人能解释一下如何改变这个状态变量吗(我没有得到错误)
class Header extends Component{
state = {
navDoggo : ['Apartment','Services'],
nav_id : 1
}
render(){
return(
<View style={{width : 60, height:60}} onPress ={
() =>
{return (thi
浏览 2提问于2019-08-15得票数 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回答
我已经创建了一个SocialShare组件，当单击任何其他组件上的Share按钮时，我希望呈现该组件。
import React, {Component} from 'react';
import {View, Share, Button} from 'react-native';
export class SocialShare extends Component {
onShare = async () => {
try {
const result = await Share.share({
message
浏览 0提问于2019-05-20得票数 0
我想要了解为什么我的文本不能渲染，以及我如何才能让它工作
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
我在另一个文件中有一个对象数组，我将其映射到2个文件中怎么办:在react-native中使用e.target.src，因为在react-native中我们没有e //存储文件： export default [
{
liked: false,
},
{
liked: false,
},
{
liked: false,
},
{
liked: false,
},
浏览 6提问于2021-10-31得票数 0
回答已采纳
我正在开发react-native项目。我是第一次接触react-native。我有一个屏幕，它显示了扁平列表，在这个扁平列表中，每个单元格都有一些音频URL。一旦用户点击网址，我们必须显示音频播放器的屏幕底部。我们还必须显示播放/暂停/停止、进度条、背景墙纸和曲目标题等控件。
此外，如果用户导航到其他屏幕，如果音频播放器播放音频，我必须维护这个底部音频播放器每个屏幕。
我基本上来自iOS开发，在iOS中我们知道我们可以在应用程序委托类中定义这个底层视图，但是，在react原生中如何实现这一点，以及如何维护音频播放/停止的这种状态？有什么建议吗？
浏览 0提问于2019-06-26得票数 1
我在GitHub的页面上找不到任何东西
我有一段代码要理解，随着这个autoRehydrate被删除，我想知道如何用version 5 of redux-persist来实现代码。
import { AsyncStorage } from 'react-native';
import { applyMiddleware, createStore } from 'redux';
import { autoRehydrate, persistStore } from 'redux-persist'
import thunk from 'red
浏览 0提问于2018-09-18得票数 3
我是一个新的react-native，我正在从服务器获取数据，并在数据的基础上更新我的UI元素，就像改变背景颜色或隐藏图像一样。为了实现这一点，我应该遵循什么方法，现在我正在尝试使用redux来实现，但不知何故无法更新redux中的特定项，因为在redux中我正在存储Json数据。我试着更新，但仍然没有运气来更新redux。
基本上，如果我从服务器自动获得任何数据，比如通知或其他数据，我想在每个屏幕上更新我的UI。
请帮助我决定更好的方法来实现这一点。
提前谢谢。
依赖关系：
"dependencies": {
"firebase": "^5.0
浏览 3提问于2019-05-14得票数 1
我是React-Native和Redux的新手，我想弄清楚Redux实际上是如何工作的。
我的目标是从db获取数据(假设当前登录用户正在关注的帐户)，并能够在特定的屏幕上显示这些数据。
我已经成功地做到了这一点，设置了action、reducer和所有的东西，但我不理解的是如何在组件中实际显示它。
我使用mapStateToProps从存储中获取数据，并将userFollowedAccounts设置为store.accountState.userFollowedAccounts。我不明白的是，我是否还必须将该userFollowedAccounts传递到我的函数组件中的useState中才能使
浏览 1提问于2021-07-23得票数 0
1回答
我有一个关于react-native组件可能性的问题，为了解释我的问题，我实现了以下示例代码；
export default class App extends Component {
render() {
return(
<View>
<FirstChild/>
<SecondChild/>
</View>
);
}
}
class FirstChild extends Component {
render() {
return(
<V
浏览 0提问于2019-11-15得票数 0
我创建了一个名为"CommonStyleGenerator“的组件，以生成具有诸如高度、宽度和bgColor等键的简单样式对象。我已经在组件中创建了文本字段，每当文本在任何文本字段中发生更改时，我都会使用更改的字段键调用onStyleChange，并且在父组件中存储更改后的值。
下面是CommonStyleGenerator.js组件代码：
import React, { useEffect, useState } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-nat
浏览 1提问于2021-01-26得票数 0
回答已采纳
当secureTextEntry为真时，有没有办法在react-native中改变textInput的样式？我想在隐藏文本中显示星号(*)而不是点。
浏览 1提问于2018-06-04得票数 4
今天，我想在react本机中创建数组，并通过钩子更新它，以便按顺序在屏幕上显示元素。因此，最后的结果应该是0 1 2 3 4，到目前为止，我的代码
import React, { useState, useRef } from "react";
import { StyleSheet, Text, View, Button } from "react-native";
export default function App() {
const [arr, setArr] = useState([]);
function test() {
for
浏览 4提问于2021-06-23得票数 0
回答已采纳
我是ReactNative的新手。(我非常熟悉原版Android)
昨天，当我使用AsyncStorage (我认为不正确)时，我遇到了一个问题，视图每百万秒就重新呈现一次。
我的代码：
import React, { Component} from 'react';
import {Image, Platform, StyleSheet, Text, View, Button} from 'react-native'
import { AsyncStorage } from "react-native"
export default cla
浏览 0提问于2018-12-25得票数 1
回答已采纳
2回答
如本例所示：我正在尝试打印开关的开/关状态，如下所示：
import React, { useState } from "react";
import { View, Switch, StyleSheet, Text } from "react-native";
const App = () => {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousS
浏览 0提问于2020-10-01得票数 3
我正在使用构建一个聊天应用程序。我遇到的问题是，我的React组件正在无限循环中重新生成。我使用StackNavigator访问屏幕，并能够单击back按钮，以便卸载该组件以停止无限重命名。我的密码在下面。有人能帮我弄清楚如何防止无限的重拍吗？
import React, { useState, useEffect } from 'react';
import { StyleSheet } from 'react-native';
import * as firebase from 'firebase';
import firestore fr
浏览 0提问于2020-06-16得票数 0
回答已采纳
我正在寻找所有的网络，但我没有找到任何解决方案，可能是因为我是React-Native宇宙的新手。
好的，我的问题是关于Node Parent更改子代的值。
我的情况是，我有一个数据控制器，这个数据控制器监听来自事件的数据，当事件发生时，它需要更新一个像Slider这样的组件。
渲染器必须是。
<DataListener url={this.state.service_url}>
<Slider style={this.styles.slider_component}/>
</DataListener>
我需要了解使用我的Class DataList
浏览 0提问于2017-04-02得票数 0
2回答
假设当我的React运行时，它连接到一个MQTT代理，其中数据被发送到应用程序。然后，这些数据存储在一个看起来像这样的对象中：
var data = {
shoeColor1: 'blue',
shoeColor2: 'red'
shoeColor3: 'orange'
}
下面的React组件显示该数据。
import React, {Component} from 'react';
import { Button } from 'react-native';
export
浏览 4提问于2021-03-08得票数 0
回答已采纳
我想要这样的输出，每当我按下‘编辑’，它应该显示一些textInput字段。我该如何为它写函数呢？如何将这些textInput值存储在变量中？有没有可能创建一个具有TextInput字段的函数，并通过按“编辑”来调用？谢谢
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
TextInput,
TouchableHighlight,
Alert
} from 'react-nat
浏览 2提问于2017-03-01得票数 1
回答已采纳
2回答
在函数中响应本机网络意外令牌
、、、、
我目前正在努力学习Reactive原住民，但我已经在本教程的网络部分中苦苦挣扎。
这是代码：
import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';
class App extends Component {
function getMoviesFromApiAsync() {
return fetch('https://facebook.github.io/react
浏览 4提问于2017-03-13得票数 0
回答已采纳
3回答
我试图创建一个简单的问答应用程序，我分享了下面的代码示例，在下面的示例中，我如何在默认情况下隐藏答案，并在单击按钮时显示答案？
import React, { useEffect, useState } from "react";
import {View, Text, StyleSheet, Button} from 'react-native'
const Testing = ({ navigation }) =>{
return (
<View style={{
backgroundColor: '#f1f1f1'
浏览 5提问于2022-08-31得票数 -1
当我用后增量运算符更改变量状态时，count变量使用旧值.
让我以这个应用程序为例来解释：
当我使用以下代码按下按钮时，应用程序将向我展示这个系列：
0 - 0 - 1 - 1 - 2 - 2 - 3 - 3 - 4 - 4 - 5 - 5 ...
但是在数学逻辑中，它应该展示这个系列：
0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 ...
守则：
import React, { useState } from 'react';
import { Button, SafeAreaView, Text, View, } from
浏览 2提问于2021-07-05得票数 1
回答已采纳
1回答
当我从AsyncStorage获得数据时，它不会等待显示。
它在捕获值之前返回值。
我不能使用异步等待函数。如果是这样的话，它不会编译。
今天我找了一整天，但找不到答案。
我怎样才能解决这个简单而又复杂的问题呢？
反应码
import React from 'react';
import { StyleSheet, View, Text, AsyncStorage, TouchableOpacity } from 'react-native';
import { useSelector, useDispatch } from 'react-redux&#
浏览 0提问于2019-11-04得票数 0
回答已采纳
1回答
我需要在文件artistPage.js中引用TabNavigator in index.ios.js。特别是，当用户在页面TabBar上时，我需要更改样式以隐藏artistPage。
我怎么能这么做？有什么想法吗？
我试图在道具中转换样式，但是有只读模式(
index.ios.js
'use strict'
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
Image,
Text,
NavigatorIOS,
Touch
浏览 2提问于2016-07-05得票数 4
回答已采纳
我用我的FlatList得到了这个错误
VirtualizedList:您有一个更新速度慢的大列表--确保您的renderItem函数呈现遵循PureComponent、shouldComponentUpdate等性能最佳实践的组件。
我的renderItem是：
renderItem(item) {
return (
<View style={[styles.item]}>
<AgendaItem item={item} />
</View>
);
}
我的成分是：
import Re
浏览 0提问于2018-09-06得票数 4
回答已采纳
我有一个SectionList，它有很多图像是从一个防火墙存储中获取的。当它向下滚动时，它会迅速地产生许多警告。
WebImage组件如下所示：
import React, { Component } from 'react'
import { View, Image } from 'react-native'
import firebase from 'firebase'
class WebImage extends Component {
state = {
imgsrc: '',
mounte
浏览 3提问于2017-07-06得票数 1
我使用的是react-native导航包。
问题是，在从一个屏幕导航到另一个屏幕时，它会短暂地显示一个白色屏幕。
我如何才能准备好下一个屏幕，这样当我更改屏幕时，它会显示预先渲染的屏幕，而不是白色屏幕？
谢谢
浏览 0提问于2019-01-23得票数 0
官网提供的CheckBox仅支持Android。 我们如何在iOS和Android都支持的react-native中实现checkbox？
浏览 14提问于2019-05-01得票数 1
2回答
编辑：
在问这个问题之前，我在代码中犯了一些愚蠢的错误。我现在意识到，这个问题可能不会像我所说的那样对任何人有用，实际上是误导人的。向那些回复的人表示歉意并感谢你们。
我目前正在学习“反应本地人”，并遇到了一些不直观的行为。据我所知，useEffect钩子可以用来确定组件的生命周期(即当它挂载和卸载时)。当我更新组件中的状态(在本例中为“ComponentX”)时，整个组件似乎重新装入。我不认为这是有意的行为。如果有人能告诉我，如果是这样--或者我做错了什么，导致了这一切--那将是非常有帮助的！谢谢。
预期行为：组件不卸载和重新装入。
实际行为：组件在每次状态更改时重新装载。
import
浏览 2提问于2021-05-11得票数 0
我对React和React-native是相当陌生的，我正在努力理解如何更新return方法中的变量。
目前这是我的代码
import React, { Component } from "react";
import { View, StyleSheet, Platform, Text, Button } from "react-native";
export default class App extends Component<{}> {
constructor() {
super();
this.handleClick
浏览 0提问于2018-07-14得票数 3
回答已采纳
3回答
下面是我的示例代码，我希望单击更新ListView元素。
这一行定义了样式：
(this.state.selectedField.id==field.id)?'green':'white'
在这个例子中，活动的View应该用绿色高亮显示。状态在handleClick()中正在更新，但不调用renderField()方法。
如何在单击触发的状态更改上重新呈现ListView？
import React, {Component} from 'react';
import {
AppRegistry,
View,
ListView,
浏览 4提问于2016-07-07得票数 4
回答已采纳
在React-Native中，我使用了我想要的组件<SimpleLineIcons name='heart' size={32} style={{position: 'absolute', left: 10}}/>，这样当我单击它时，它就会被替换为这个组件<AntDesign name='heart' size={32} color="red" style={{position: 'absolute', left: 10}}/>。我该怎么做呢？
浏览 24提问于2021-04-03得票数 1
回答已采纳
我只想做些简单的事但我不能。 import * as React from 'react';
import {
View,
Button,
ScrollView
} from 'react-native';
const server = require("../server.json");
export default class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.x = "
浏览 28提问于2020-12-14得票数 0
我想实现flatlist的多选功能。我直接在官方网站上修改了这个例子。官方网站地址是：。因为列表中有很多项，所以我想使用shouldComponentUpdate来防止过度呈现项。但是我发现react钩子编写方法不能实现多选，它不能保存选中的状态，但是类编写方法可以实现多选，原因是什么？FlatList项目的源码如下：
import {StyleSheet, Text, TouchableOpacity} from 'react-native';
import React, {Component} from 'react';
class Item ex
浏览 1提问于2020-06-17得票数 0
5回答
我正在学习如何在我的react-native安卓应用程序中实现。我认为在应用程序中维护状态是有帮助的。
例如，如果用户已经登录，那么它有助于将用户状态保存到logged，再保存到true类。我希望我的例子是正确的。我看到react-native也有AsyncStorage，无论用户是否登录，我们都可以保存它。
我们可以编写一个逻辑，如果用户已经登录，那么在AsyncStorage中将logged设置为true，在注销时设置为false。现在，在闪屏上检查这是真是假，然后相应地导航。
如果可以使用AsyncStorage来管理这种状态，那么redux在react-native应用程序中的用例是什
浏览 0提问于2017-05-17得票数 1
1回答
我正在学习如何使用React Hooks，并且在一些本应非常简单的事情上被卡住了好几个小时。如果状态变量"loading“为true，我会尝试显示一个文本。如果它是false，我想显示一些其他的东西。无论我怎么尝试，"loading“总是错误的，或者至少UI看起来不能反映它的值。 代码如下： import React, {useState, useEffect} from 'react';
import {View, SafeAreaView, Text} from 'react-native';
const testScreen= (p
浏览 9提问于2020-04-28得票数 0
回答已采纳
1回答
为什么React本机单功能组件中基于react钩子的回调总是接收isNameInvalid变量的不推荐值？
在下面的示例中，onChangeText回调总是接收False，即使它发生了更改。上面的console.log显示了正确的值。
为什么会发生这种情况，如何解决呢？是关于闭包的吗？
我认为回调在每次重新呈现时都会重新创建自己，因此我希望它能够接收到正确的值。
import * as React from 'react;
import { View, TextInput } from 'react-native'
export default function C
浏览 4提问于2020-07-20得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
