React Native:放置全局状态变量的位置
React Native是一种用于构建跨平台移动应用程序的开源框架。它允许开发人员使用JavaScript和React编写一次代码，然后可以在iOS和Android等多个平台上运行。
在React Native中，可以使用多种方式来管理全局状态变量的位置。以下是一些常见的方法：
- 使用React Context：React Context是React提供的一种用于在组件树中共享数据的机制。可以创建一个Context对象，并将全局状态变量存储在该对象中。然后，可以在需要访问该全局状态变量的组件中使用Context提供者和消费者来获取和更新状态。
- 使用Redux：Redux是一个用于管理应用程序状态的JavaScript库。它使用单一的全局状态存储，并通过使用纯函数来处理状态的变化。可以在React Native应用程序中使用Redux来存储和管理全局状态变量。
- 使用MobX：MobX是另一个用于状态管理的JavaScript库。它使用可观察的数据结构来自动追踪状态的变化，并在状态变化时自动更新相关的组件。可以在React Native应用程序中使用MobX来管理全局状态变量。
- 使用React Hooks：React Hooks是React 16.8版本引入的一种新特性，它允许在函数组件中使用状态和其他React功能。可以使用useState或useReducer钩子来创建和管理全局状态变量。
无论选择哪种方法，都需要根据应用程序的需求和规模来决定。以下是一些腾讯云相关产品和产品介绍链接地址，可以帮助开发人员在React Native应用程序中管理全局状态变量：
- 腾讯云移动应用开发平台：提供了一套完整的移动应用开发解决方案，包括云端存储、推送服务、用户认证等功能。链接地址：https://cloud.tencent.com/product/mapp
- 腾讯云云开发：提供了一种无服务器的后端开发解决方案，可以帮助开发人员快速构建和部署应用程序后端。链接地址：https://cloud.tencent.com/product/tcb
请注意，以上仅为示例，实际选择的产品和解决方案应根据具体需求进行评估和决策。
相关·内容
我收到null不是一个对象(计算'this.state.search')我是新的反应-本机，所以不是100%确定发生了什么。谢谢你的帮助。
这是我的基本搜索栏：
use strict';
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
import renderIf
浏览 0提问于2016-12-23得票数 2
我正在使用api获取一些数据。在该api内部有一些执行的SQL查询。我有api，将用于获取数据或执行这些查询。我想知道如何将图表的静态数据替换为将从api获取的动态数据。 这是我的TabDashboardDetail.js，我在这里根据api数据获取所有图表的标题： import React from 'react';
import DefaultScrollView from '../components/default/DefaultScrollView';
import ChartView from '../components/default/
浏览 13提问于2021-04-22得票数 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
我正在开发一个应用程序，使用api登录，并使用检索到的令牌注销。
这是我的App.js
import React from 'react';
import AppNavigator from './src/navigations/Navigator';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';
export default class App extends React
浏览 0提问于2021-02-10得票数 0
2回答
在兄弟姐妹之间传递数据回响应本机
、、、、
我有一个问题，在反应本机，我想要共享一个数组之间的两个兄弟组件。我的应用程序有一个底部导航导航器，因为我定义了要导航的组件：
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Icon from "react-native-vector-icons/Ionicons";
import { createBottomTabNavigator } from "react-navigatio
浏览 1提问于2018-09-26得票数 0
回答已采纳
我正在开发一个旅游应用程序，其中包含一个带有使用我的数据制作的标记的地图。我想添加一个选项来“过滤”它的标记。用户可以按下按钮“饭店”、“酒店”、“商业”来只显示所选的标记。
(用户按下"Restaurants“->只显示餐厅标记，这是一个想法的图片：
这是我的Axios请求的代码，没什么大不了的：
import axios from 'axios';
// URL API BASE
const APIURL = 'http://10.22.101.55:5000/api';
// RECUPERATION DES RESTAURA
浏览 17提问于2021-05-12得票数 0
回答已采纳
我正在尝试将最新的RN项目集成到本地项目中。这两个项目都在不同的目录中，这意味着我的本地项目不存在于预定义的ios文件夹中。
版本：
RN Native: 0.63.3 @react-native-community/cli: 4.13.0使用yarn global add @react-native-community/cli全局安装。
我收到一个错误，声明react-native-community包未找到。
下面提到我的pod文件：
require_relative '../AwesomeProject/node_modules/react-native/scripts/reac
浏览 12提问于2020-11-11得票数 3
我正在尝试测试一个基本的Axios钩子，并接收到： TypeError: globalObj.setTimeout is not a function
at setImmediatePolyfill (node_modules/@testing-library/react-native/build/helpers/timers.js:59:20)
at Object.then (node_modules/@testing-library/react-native/build/flushMicroTasks.js:26:32) 据我所知，预期的正在通过，但由于某些原因
浏览 11提问于2021-11-18得票数 2
回答已采纳
我使用@ test -library/react-native来测试我的RN应用程序。当我运行yarn测试时，出现以下错误。
@testing-library/react-native should have "jest-preset.js" or "jest-preset.json" file at the root.
我的应用程序使用typescript。
我的测试脚本是这样的。
test": "jest --config jest.config.json"
jest.config.json文件是这样的。
{
"prese
浏览 6提问于2020-11-16得票数 5
我试图自动启动视频，但在此之前，实现计时器和清除计时器是我的目标。倒计时正在被清除，但是在分配我的setInterval的状态下，即使在清除之后，计时器也会继续增加。而且，有很多帧丢弃了和结结巴巴的在每个按钮上，即使我的代码变得太凌乱了--我真的很感激任何帮助我改进我混乱的代码和避免那些丢弃的帧。
谢谢。
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
BackHandler
浏览 0提问于2018-09-04得票数 0
嗨，我是一个非常新的反应，我真的很难弄清楚很多事情。现在，当用户加载我的主页时，我正在尝试从我的数据库中获取数据。我用这个异步函数来做这件事： let result = await fetch("/api/init", {
method: "GET",
headers: { "Content-Type": "application/json" },
})
.then((response) => response.json())
.then((data) =&g
浏览 17提问于2020-08-11得票数 0
如何在react-native中创建全局帮助函数
我想要用于访问sqlite数据库或从服务器获取数据。我可以用函数创建一个JavaScript文件并从多个视图调用该函数吗？
浏览 9提问于2015-11-05得票数 13
回答已采纳
这是我的密码。它只是一个简单的测试屏幕。导航是在两个屏幕上完成的。我是初学者，所以我对redux不熟悉。我希望当用户在第二个屏幕上输入文本时，当用户从第二个屏幕切换到第一个屏幕时，相同的文本将以用户名的形式出现在第一个屏幕上。请帮帮我。谢谢，
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class FirstScreen extends Component {
constructor(props) {
浏览 1提问于2019-10-31得票数 0
1回答
找不到变量: setState
、、、、
我正在尝试制作一个切换按钮，当点击时改变图标和图标的颜色，我遵循了一个教程，但遇到了这个问题。
我试着改变周围的东西，弄乱它，但我总是得到相同的错误：“无法找到变量: setState”
导致问题的代码：
import { View, Text, StyleSheet ,Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { Caption } from "react-native-pap
浏览 23提问于2021-02-20得票数 0
回答已采纳
我正在尝试在react-native中做一个虚拟终端，它可以根据屏幕上显示的输入.Then输出一些文本，我不知道我的返回做错了什么，到目前为止，我成功地获得了输入文本值并呈现了它，但无法输出所需的文本 import React,{useState, Component,} from 'react';
import { Text, View,StyleSheet,TextInput, TouchableNativeFeedbackBase,} from 'react-native';
import Header from './components
浏览 10提问于2020-06-14得票数 1
1回答
我有一个Webstrom项目，传单Map没有定义为类，它被定义为const Map = () => {
我从带有axios的URL中得到一个响应。我想从JSON.stringify(res.data，null，2)响应中设置res.data
我从“传单”中进口了L，而“反应-传单”有{Map, TilesLayer, Marker, Popup}类。
我要把反应放到地图上
以下是我的例子：
VisonMap.js
import React from "react";
import axios from "axios";
import {MapContain
浏览 4提问于2022-03-23得票数 1
在尝试嵌入react-native-maps函数时，我得到了这个错误消息。
react-native-maps - TypeError: undefined is not an object (evaluating '_this.state.region')
我的代码
Home.js
import MapView from 'react-native-maps';
export default () => (
<MapView
style={{
position: 'absolute',
浏览 0提问于2018-12-24得票数 1
回答已采纳
我是新来的本地人。当在应用程序中按下前一个按钮和下一个按钮时，图片会发生更改。但是它会等待一段时间，直到图片被加载到屏幕上。因为图像是从火柴库里传来的。当按钮被按下，我想要一个加载图标出现，直到图像被加载。在这种情况下，我不知道如何使用ActivityIndicator。有人能帮我吗？
应用图片：
代码：
import React, { useState } from 'react'
import { Image, Text, TouchableOpacity, View } from 'react-native'
import { StyleSh
浏览 1提问于2021-11-13得票数 0
回答已采纳
1回答
我正在尝试让本机在我的Linux机器上工作。为了让cli运行，我已经运行了：
$ yarn global add react-native-cli
并见：
yarn global v0.16.1
warning No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed react-native-cli@1.0.0 with binaries:
浏览 5提问于2016-10-30得票数 3
回答已采纳
我希望第二个View相对于第一个View的-50，但是第二个View并不是在底部完全扩展。
import React from 'react';
import {View, Text} from 'react-native';
export const OverlayStorybook = () => {
return (
<View style={{flex: 1}}>
<View style={{height: 100, backgroundColor: 'red'}}>
浏览 0提问于2020-02-14得票数 0
回答已采纳
我有一个组件，它在屏幕顶部和底部呈现一个WebView和一个文本组件：
return (
<Container>
<Text>TEXT TOP</Text>
<WebView source={{uri: url}} />
<Text>TEXT BOTTOM</Text>
</Container>
);
我面临的问题是，当我第一次导航到特定组件时，“文本顶部”不会出现，而“文本底部”则会显示得很好。为了使顶部的
浏览 0提问于2019-03-19得票数 0
2回答
这是我的例子，我试图选中和取消选中“复选框”，但我感到困惑，如果有人告诉我应该如何做，我会很高兴。
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { CheckBox } from 'react-native-elements';
const NewPlaceScreen = props => {
const [checked, setChecked] = useState(fa
浏览 4提问于2020-01-01得票数 1
我使用以下命令行：
npx react-native init AwesomeProject1
找出这个错误：
✖ Downloading template
error Error: Command failed: yarn init -y
Usage: yarn [options]
yarn: error: no such option: -y
更新：
npm uninstall --location=global yarn
这条线解决了我的问题。有人能解释一下为什么吗？
浏览 9提问于2022-09-03得票数 0
我在以下版本的react-native的帮助下实现了一个应用程序
{
"lodash": "^4.17.10",
"lottie-ios": "^3.0.3",
"lottie-react-native": "^3.0.1",
"metro-react-native-babel-preset": "^0.53.1",
"moment": "^2.22.2",
**"react
浏览 1提问于2019-09-05得票数 0
从我的命令行，我运行 npm install react-native 在我的package.json中： "react": "^16.13.1",
"react-dom": "^16.13.1",
"react-modal": "^3.11.2",
"react-native": "^0.62.2",
"react-native-cli": "^2.0.1",
"react-router-dom": "^5.
浏览 232提问于2020-07-03得票数 2
我在我的React Native App中有这样的政策：
违反Android广告ID政策和开发商分发协议第4.8节
表单Google Play
我使用这个依赖项
"dependencies": {
"lodash": "^4.17.10",
"react": "16.3.1",
"react-native": "0.55.3",
"react-native-device-info": "^0.21.5",
"react-na
浏览 0提问于2018-09-23得票数 3
回答已采纳
1回答
连接反应本机表达
、、
我刚开始做反应-本地人。我用的是世博会和快递。我正在试图连接前面和后面的一个GET请求。我得到了一个：
‘RootErrorBondary’：错误边界应该实现getDerivedStateFromError()。
在该方法中，返回状态更新以显示错误消息或fallbackUI。
谢谢!
这是我的App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import axios from 'react-native-axios';
浏览 3提问于2020-01-09得票数 0
如何在react-native中设置文本组件上的模态选定值。 我使用的是'react-native‘中的模态组件。 从'react-native‘导入{ StyleSheet，视图，文本，TouchableOpacity，图像，模态，} <View style={styles.vwstyle}>
<Text style={styles.texthead}>You are Interested in</Text>
<View style={styles.vwside}&g
浏览 7提问于2020-01-24得票数 0
回答已采纳
我使用的组件与AppPicker一起选择一个国家，然后通过AppPicker将选择的国家传递给另一个组件，我的问题是，我得到的对象作为一个React子无效。AppPicker的onselect方法返回一个对象数组，如下所示，我有一个函数，它只提取国家名称，国家名称存储在country state中，我将它传递给另一个组件以供显示。有人能帮忙解决这个问题吗。我的组件如下所示：
Covid.js
import React, { useState } from 'react';
import { StyleSheet, TouchableOpacity, Text, View } f
浏览 2提问于2021-08-31得票数 0
回答已采纳
1回答
Jest覆盖工具失败
、、、、
在我的react原生项目中，在测试执行期间，Jest显示覆盖率并创建覆盖率报告。 Jest配置： import type {Config} from '@jest/types';
const config: Config.InitialOptions = {
// basic params to setup test ext and env
preset: '@testing-library/react-native',
verbose: true,
moduleFileExtensions: ['ts', &
浏览 57提问于2021-10-20得票数 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
我已经使用redux-坚持大约6个月，它从来没有发生，但这一次，在我的新项目redux-坚持是无效的，我不知道原因是什么。请注意，我不能降级，因为我将不得不重新弹出这个项目，我不能这样做。需要快速修复。
任何帮助都将不胜感激。谢谢。
My Package.json
"dependencies": {
"@ptomasroos/react-native-multi-slider": "^1.0.0",
"@react-native-community/async-storage":
浏览 0提问于2019-07-26得票数 1
回答已采纳
2回答
在我的代码中，我有一个页面显示从数据库中检索到的元素列表。但是，我还添加了一个允许用户选择几个过滤器的页面。
我有两个问题：
离开页面后，我必须保存数据(它必须呆在那里)
我必须将数据传输回元素列表。
我认为，通过给过滤器屏幕提供前一个屏幕中的变量，它会将数据保存在那里，但它似乎不起作用。
你对我该做什么有什么建议吗？
import React from 'react'
import { SafeAreaView, View, Text } from 'react-native'
import {generalStyles} from '
浏览 4提问于2020-03-07得票数 0
我想学习React-native，我正在使用并使用create-react-native-app进行安装。
我还在为reactjs中的一个项目工作，该项目也是使用create-react-app安装的。当我尝试使用cmd安装react-native时：
npm install -g create-react-native-app
我看到以下错误
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm
浏览 11提问于2018-08-16得票数 3
回答已采纳
让第二个选择器(selectedValue2)工作的方法是什么？当我试图改变第二个选择器时，它不会改变它的值，我不明白为什么。我想知道原因是什么，以及我是如何处理它的。 import React, { useState } from 'react';
import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
import { Picker } from '@react-native-community/picker';
const Settings
浏览 22提问于2020-08-10得票数 0
回答已采纳
我的React组件将用户的设置存储在AsyncStorage中，并加载get的设置。存储和获取数据运行良好，但存在一个问题，即组件在从异步函数获取值之前呈现。如何解决这个问题？这是我的代码：
import React from 'react';
import { View } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import { Media } from '../constants';
cla
浏览 21提问于2020-07-29得票数 3
回答已采纳
1回答
可触摸高光加组件
、、
我想将导出的组件添加到TouchableHighlight中的react本机中。
var MessageBox = require('./GiftedMessengerContainer');
var MyAppName = React.createClass({
_openGiftedMessanger(){
return (<MessageBox style={styles.container}/>);
},
render: function() {
return (
<View style=
浏览 4提问于2016-05-13得票数 1
回答已采纳
我是新来的反应本地人。请帮我解决这个问题。我哪里错了？请指出并纠正我..。非常感谢
import React, {Component} from 'react';
import {Alert,View,Image} from 'react-native';
import ImagePicker from 'react-native-image-picker';
import {Button} from "../components/common";
class ImageSelect extends Component {
浏览 1提问于2018-01-23得票数 0
我一直在尝试导入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
4回答
我想安装react本机cli，但是我不知道在哪里运行这个命令：npm install -g react-native-cli。我是否需要在我的macOS终端上运行这个命令，或者当我要为我的本机应用程序创建一个目录时，我需要在vscode中运行这个命令？
如果我在我的终端中运行这个命令，或者在VScode中运行这个命令，有什么问题吗？
浏览 7提问于2021-07-13得票数 1
回答已采纳
5回答
卸载react-native-cli后，我运行以下命令来使用类型记录模板启动RN项目：
npx react-native init MyApp --template react-native-template-typescript
但我发现了一个错误：
警告笑话> jest-cli > jest-config > jest-environment-jsdom > jsdom
左pad@1.3.0:使用String.prototype.padStart()错误一个意外的错误发生："：Not“.info如果您认为这是一个错误，请打开.
1/2移除模块react-na
浏览 17提问于2019-09-24得票数 15
回答已采纳
1回答
我使用的是react-native-camera，当我打开它时，我不能返回到硬件按钮，所以我决定创建一个按钮出口，这样当用户点击它时，就应该返回到以前的视图。问题是我只使用了一个类！那么如何导航到相同的类但不同的视图呢？ 下面是我尝试过的方法： import { createStackNavigator, createAppContainer } from "react-navigation";
<View style={styles.barcode_bottomOverlay}>
<TouchableOpacity
浏览 13提问于2020-01-10得票数 0
1回答
我们试图使用以下代码导入react本机-获取-blob包包：
const RNFetchBlob = require('react-native-fetch-blob');
const firebase = require('firebase');
但是，当我们尝试和构建时，我们会得到一个语法错误，用于意外的令牌导入，如下所示。
C：\User\ ...\node_modules\react-native-fetch-blob\index.js:5
进口{
^
SyntaxError:意外的令牌导入
在Object.exports.runInThisConte
浏览 2提问于2017-02-05得票数 6
我正在尝试安装react-native-version-number。声明:安装完成后，发出；
react-native link react-native-version-number
但是当我这样做的时候，我得到了以下错误信息；
Looks like you installed react-native globally, maybe you meant react-native-cli?
To fix the issue, run:
npm uninstall -g react-native
npm install -g react-native-cli
但是当我跑的时候
npm uni
浏览 12提问于2016-09-12得票数 0
回答已采纳
1回答
我尝试在mt应用上实现世博会通知，非常有线，在我的上一个世博应用程序中，它工作得很好，但现在它不起作用了，也许是因为版本更新--这是在我尝试使用世博文档中的代码时显示出来的
Error: Couldn't get GCM token for device
这是pacage.json：
我的package.json：
{
"name": "blabla",
"version": "0.1.0",
"private": true,
"devDependencies": {
浏览 0提问于2018-09-07得票数 5
我刚刚发现我可以在这个设置中安装TypeScript定义：
这很方便，因为我不需要使用typings或npm来安装这些类型。
但是，tsconfig.json中的哪些设置使WebStorm使用这些定义？在webstorm中下载的这些库实际工作吗？
我还在买Cannot find module react in .tsx
tsconfig.json：
{
"compilerOptions": {
"module": "commonjs",
"target": "es
浏览 7提问于2017-03-03得票数 0
回答已采纳
1回答
我不能用世博创建建筑
、、、、
我已经创建了带有react本机的应用程序，当我尝试创建apk时，它在本地设备上运行得很好。
exp构建:android
出现此错误:-独立构建失败！然后我运行这个命令expo build:android错误-这是结果：-
无法读取JSON文件: /Users/mohamed/Desktop/oils/errors/package.json 04:58:12└─原因:错误: ENOENT:没有这样的文件或目录，打开'/Users/mohamed/Desktop/oils/errors/package.json‘/04:58:12有一个与您的项目有关的错误。有关信息，请参阅上面的日志。04
浏览 0提问于2019-01-21得票数 1
我正试着把比萨饼图标移到搜索栏的正右边。 我不仅无法将搜索比萨饼图标移动到搜索栏的右侧，而且根本无法移动它。 这个主要的披萨图标在MainPage中是这样的： import React, { Component } from 'react';
import { Text, View } from 'react-native';
import axios from 'axios';
import Card from './Card'
import NewCard from './NewCard'
export d
浏览 17提问于2019-05-02得票数 0
1回答
我需要从GPS进入我的位置。所以，我把地理定位引入项目。
首先，我创建了如下所示的内容(，已经链接)
我刚刚在我的Xcode中添加了NSLocationWhenInUseUsageDescription
而且，我已经在我的Xcode中使用了libRCTGeoloc.a。
然后，我从Airbnb上读取地图视图。告诉我将showUserLocation设置为"true“。当设置为真时，将要求用户访问位置。
参考资料：
最后，这并不是要求任何东西访问位置。所以我不知道为什么。我找不到我现在的位置。
这是我从begin 中一步一步描述的图片
我会给你看我的密码。
Route.js
import
浏览 2提问于2017-02-21得票数 0
我有一个屏幕，我检查这是否是用户第一次启动应用程序，然后导航到适当的屏幕。只要navigation.replace()函数被触发，应用程序就会崩溃。下面是代码。我做错了什么？
import React, { useEffect } from 'react'
import * as SecureStore from 'expo-secure-store'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { ActivityIndicator } fro
浏览 37提问于2021-11-14得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
