调用React Native Navigator后应用程序冻结
是指在使用React Native开发移动应用时，当调用React Native Navigator组件进行页面导航时，应用程序出现卡顿或无响应的现象。
React Native Navigator是React Native框架中用于实现页面导航的组件，它提供了一套简单易用的API来管理应用程序的导航栈和页面切换。然而，由于React Native的特性和一些潜在的问题，调用React Native Navigator可能会导致应用程序冻结的情况。
造成应用程序冻结的原因可能有多种，以下是一些可能的原因和解决方法：
- 性能问题：React Native在处理大量数据或复杂页面结构时可能会出现性能问题，导致应用程序冻结。解决方法包括优化代码逻辑、减少不必要的渲染和布局操作、使用虚拟列表等技术来提高性能。
- 内存泄漏：使用React Native Navigator时，如果没有正确管理页面的销毁和释放，可能会导致内存泄漏，最终导致应用程序冻结。解决方法包括及时销毁不需要的页面、释放相关资源、使用内存分析工具来检测和修复内存泄漏问题。
- 异步操作阻塞：在React Native中，一些异步操作（如网络请求、文件读写等）可能会阻塞主线程，导致应用程序无响应。解决方法包括使用异步操作的优化技巧（如使用Web Workers、使用合适的异步库等）来避免阻塞主线程。
- 第三方库冲突：React Native使用了许多第三方库来实现各种功能，不同版本的库之间可能存在冲突，导致应用程序冻结。解决方法包括检查和更新第三方库的版本、解决库之间的依赖冲突。
对于React Native Navigator的替代方案，腾讯云提供了一些相关产品和服务，如腾讯云移动应用开发平台（https://cloud.tencent.com/product/madp）和腾讯云移动推送（https://cloud.tencent.com/product/tpns），它们提供了一套完整的移动应用开发解决方案，包括页面导航、消息推送等功能，可以帮助开发者更好地构建稳定和高性能的移动应用。
相关·内容
您可以在下面找到更多详细信息。index.js app.js package.json nothing more index.js app.js package.json nothing react导航回滚不起作用。保持在同一页上，并删除页眉和页底。然后它就冻结了我不能点击任何东西
/**
* @format
*/
import React from 'react';
import {AppRegistry} from 'react-native';
import App from './App'
浏览 21提问于2021-11-25得票数 0
1回答
所以我是个新手，想学开发应用程序。我试着学习如何使用，所以我安装了它和可靠性，但是当我尝试使用它时，我得到了一些错误。第一个出现在运行npm后的cmd中：
Some of your project's dependencies are not compatible with currently installed expo package version:
- react-native-screens - expected version range: 2.0.0-alpha.12 - actual version installed: ^2.0.0-alpha.12
Your pr
浏览 2提问于2020-02-28得票数 0
我使用ReactNative开发我的iOS应用程序，为了实现QRCode扫描仪功能，我使用了react-native-camera组件，它为我的project.everything提供条形码扫描功能，但当我成功识别QRCode时，下次使用该模型时，屏幕就冻结了，似乎应用程序崩溃了。有趣的是，当屏幕冻结时，一旦模型从导航的左键取消，模块就可以正常工作。我不确定这是NavigatorIOS的内部错误，还是仅仅是react-native-camera本身的错误。
下面是QRCode组件代码：
'use strict';
var React = require('react-
浏览 3提问于2015-08-25得票数 0
我对React和React Native应用的测试知识非常有限。所以我开始在我的React Native应用中设置一些测试。我使用expo，所以我安装了jest，jest expo，react-test-renderer。我想检查一个非常简单的测试，我认为这可能不是一个简单的测试，可能是因为导航，但无论如何，我无法通过下面的错误。我正在发布我的应用程序代码，测试和我看到的错误。
在package.json中
"jest": {
"preset": "jest-expo",
"transformIgnorePattern
浏览 1提问于2020-10-28得票数 6
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
回答已采纳
这是我的app.js代码
import React from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
} from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react
浏览 8提问于2022-03-23得票数 0
1回答
我有React Native应用程序，当我需要返回时，我会使用navigator.back()。但我注意到了问题所在。
例如，如果我有三个页面A、B、C，我从A开始，然后转到B、C，然后返回B，现在如果我调用navigator.back()，它会将我带到C页，但我希望看到的是A页。
有人知道如何解决这个问题吗？
下面是我的代码示例：
import React, { Component } from 'react'
import {
StyleSheet,
View,
StatusBar,
浏览 1提问于2016-11-16得票数 0
在使用Redux的大型React Native应用程序中导航期间，所有访问过的场景(来自导航堆栈的场景)都将保持挂载状态。所有这些场景都接收道具，并按照从最后一个场景组件调度任何操作时访问它们的顺序进行渲染。它会导致调度和最后一次场景渲染之间的冻结和可见延迟。
对于导航，我使用的是，但同样的问题也发生在原始的React Native Navigator上。
视频
代码
如果知道如何防止将道具传递给导航链中未聚焦的组件，那就更好了。
目前，我正在检查每个组件的shouldComponentUpdate，如果这个组件被聚焦(可见)，则在相反的情况下返回false。
有没有更好的解决方案？
浏览 1提问于2016-08-03得票数 9
我正在阅读lynda.com上的React-本机教程，“React原住民：”。区别在于我正在使用WebStorm开发基于JavaScript的应用程序。我根据教程创建了这些文件：
appContainer.js：
import React, { Component } from "react";
import { Drawer, View } from "react-native";
import { Navigator } from "react-native";
export default class AppContainer exten
浏览 1提问于2017-07-23得票数 0
回答已采纳
0回答
尝试创建一个新的应用程序时，我从代码中得到了下面的错误。组件seesm到世界
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
浏览 0提问于2016-12-21得票数 2
我正在使用react原生和react导航。我正在尝试创建一个嵌套的导航器，也就是说，我正在尝试在堆栈导航器中放置一个制表符导航器。然而，当我在iOS模拟器上运行应用程序时，主屏幕会无限地重新加载。下面的代码可能有什么问题？如果这是一个简单的问题，那么我将对react native...bear进行新的了解！
下面是我执行嵌套的代码部分：
import React from 'react';
import Home from './routes/Home'
import Alert from './routes/Alert'
import
浏览 0提问于2020-10-05得票数 1
1回答
我试图创建一个反应本地应用程序与博览会。我有一个逻辑错误，将道具从App类传递到组件"Navigator“类型的const函数。我不知道我必须如何传递道具，或者我必须如何访问它们而不通过App：
App.tsx
import React, {useState} from 'react';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import Navigator from './Components/Navigator';
浏览 0提问于2021-03-03得票数 2
我尝试使用库，并且我得到了标题上的错误。我用提供程序包装了组件，但是只有在实现useDispatch()钩子的情况下，我仍然会得到错误。
这个应用程序运行良好，直到我添加了useDispatch()行。有关调度函数的其余行可以删除，而我仍然得到相同的错误。
如果你能帮我我会很感激的。谢谢
这是我的代码：
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import Navigator from './n
浏览 4提问于2020-02-20得票数 76
回答已采纳
我有一个问题，我在AsyncStorage中基于相同的密钥在多个组件中执行setState。因为状态是在componentDidMount中设置的，并且这些组件不一定要在导航时卸载和挂载，所以状态值和AsyncStorage值可能不同步。
这是我能做的最简单的例子。
组件A
A只需设置导航和应用程序。
var React = require('react-native');
var B = require('./B');
var {
AppRegistry,
Navigator
} = React;
var A = React.createC
浏览 11提问于2015-06-11得票数 6
因此，我构建了一个使用的登录系统。如果用户单击他登录的按钮，AsyncStorage键"@loginuser“的值将被刷新。现在我希望屏幕会自动刷新，但是我必须关闭应用程序并重新启动它--这不是最优的。
(我也看到了的帖子，但它很古老)
App.js
import React from 'react';
import { Text, View, StyleSheet, Button, TouchableOpacity, TextInput } from 'react-native';
import DefaultStackNavigation from
浏览 2提问于2021-04-13得票数 0
回答已采纳
2回答
react-向后滑动导航不会触发
、、、、
我正在使用堆栈导航，并且我想使用swipe返回。然而，即使我一直向右滑动屏幕，应用程序也不会导航到前一个屏幕，屏幕会向后滑动。 import { View } from 'react-native';
import Main from './components/Main'
import Options from './components/Options'
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react
浏览 56提问于2020-09-11得票数 0
我有一个应用程序，其中只包括导航包。在IOS上，一切都很好，但在Android上，标题和/或底部的选项卡似乎是跳跃的(可能是重新计算它们的位置)。只有当我使用导航组件和应用程序刚刚启动时才会发生这种情况。有没有人面临同样的问题？
提前谢谢。
包：
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/bottom-tabs": "^5.6.1",
"@react-navigation/native": "^5.6
浏览 7提问于2020-07-03得票数 19
我得到以下错误。
不推荐导航器，并且已从此包中删除。现在可以从react-native-deprecated-custom-components安装和导入它，而不是使用react本机。在了解替代导航解决方案
然后，我会更新react本机-弃用-定制组件包，但是问题没有解决。
Package.Json
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.2",
"react-native-deprecat
浏览 0提问于2017-06-02得票数 7
回答已采纳
我正在尝试使用React-Native navigator (v6)方法在React-Native中的组件之间传递roomID。我解构了{导航，路由}，路由总是未定义的，但它不应该是。我使用的是@react-navigation/native-stack : "^6.1.0"。我是个新手，所以我注入Redux / Stack Navigator的方式绝对是低效的： package.json版本： "dependencies": {
"@react-navigation/native": "^6.0.2",
&
浏览 53提问于2021-09-06得票数 0
我正在实现一个接收firebase推送通知的react原生应用程序。当通知到达时，应用程序导航到一个屏幕以显示通知。我使用引用遵循了这种方法：“在没有导航道具的情况下导航”https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html 当我在调试模式下对其进行测试时，它工作得很好。但当我在发布模式(android签名的应用程序)下测试时，它不能工作。 特别是，当通知到达时，应用程序是打开的，它不起作用。没有错误消息，应用程序变得冻结，在大约30秒内，应用程序崩溃。 以下是软件包信息： "r
浏览 15提问于2019-09-24得票数 1
当我试图渲染Android代码时，一切都很好，但是图标没有加载，图标的位置是交叉标志，显示‘导入工具栏，从’反应-本机-材料-设计‘；
<Toolbar
title={navigator && navigator.currentRoute ? navigator.currentRoute.title : 'RunSpace'}
icon={navigator && navigator.isChild ? 'keyboard-backspace' : 'menu'}
onIconPres
浏览 0提问于2016-06-12得票数 1
回答已采纳
我正在使用 (不确定这是否相关)，并试图处理简单的道具。但是，当我从ScreenB转到ScreenA时，它工作正常，没有任何错误。在此之后，如果我将pop()屏幕转到ScreenA，然后再次单击同一个组件以转到ScreenB，则应用程序崩溃时会出现以下错误：
您试图在对象上设置键a，其值为2，该对象意味着不可变，并且已被冻结。
下面是ScreenA: Preview中代码的一个最小示例
import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'r
浏览 2提问于2018-06-05得票数 0
就像标题说的，我正在构建包，实际上是一些应用程序的特性。
因此，这些特性包含自己的堆栈导航器，包括屏幕。
到目前为止，我得到的是：
主页功能(这是一个包)：
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { HomeView } from '../src/views';
const RootStack = createNativeStackNavigator<any
浏览 22提问于2022-07-26得票数 1
我是react原生的新手。我的应用程序中有两个页面。当我按下后退按钮时，我想打开上一页，但当我按下后退按钮时，应用程序将关闭。可以做些什么来解决这个问题？
我的代码是：
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TextInput,
TouchableHighlight
} from 'react-native';
import To
浏览 2提问于2016-08-12得票数 4
当我在我的react原生应用中启用Appsee时，我遇到了处理手势的组件的bug。导航器就是一个简单的例子：
const routes = [
{text:"1"},
{text:"2"},
{text:"3"}
];
const {Navigator} = require('react-native-deprecated-custom-components');
return <Navigator
renderScene={r => (
<View>
浏览 2提问于2018-04-20得票数 2
与标题一样，我在调用()时，对于idToken和accessToken值将获得null。
代码(与中的示例相同)：
export async function googleLogin() {
try {
// add any configuration settings here:
await GoogleSignin.configure();
const data = await GoogleSignin.signIn();
google-services.json文件已经就位，以前运行良好。在从Reactive0.59.9迁移到0.
浏览 1提问于2019-12-29得票数 1
我正在尝试在我的react原生应用程序中实现抽屉导航器。我在应该打开抽屉的组件中使用了openDrawer()函数。但是，在单击组件时，抽屉将直接启动抽屉内的屏幕，而不是简单地打开抽屉。我使用导航器的方式是错误的吗？任何帮助都将不胜感激。
Navigator.js
import React from 'react';
import { createAppContainer,createSwitchNavigator} from 'react-navigation';
import {createDrawerNavigator } from 'react-
浏览 31提问于2019-11-13得票数 1
回答已采纳
如何在React Native中隐藏？
我指的是屏幕底部的栏，它有软件的back按钮和home按钮，而不是Navigator组件附带的页面顶部的组件。
为本地开发人员解释了如何做到这一点。有人能解释一下如何通过React Native应用程序来实现这一点吗？谢谢。
浏览 2提问于2016-03-17得票数 23
我目前正在用Jest(21.2.1)和RealmJS(2.1.1)运行React-Native(0.51)。
我已经让他们在RN应用程序运行realm和我的测试与jest工作的地方玩得很好。
问题是，在运行Jest之后，我最终得到了一些工件，特别是：
* default.realm
* default.realm.lock
* default.realm.management/*
这会在构建安卓版本时产生问题，因为它在app::bundleReleaseJsAndAssets上冻结了。当我删除上面提到的文件时，它再次工作。
为了解决这个问题，我将这些文件添加到.gitignore中，并将
浏览 18提问于2018-01-02得票数 1
1回答
我正在尝试使用react本机导航从登录屏幕导航到我的产品页面。我正在使用防火墙进行身份验证。导航库是在我的app.js中设置的
我创建了一个onpress函数，它应该从登录屏幕导航到我的产品屏幕，但是我得到了这个错误。
console.error: The action 'NAVIGATE' with payload {"name":"Product","params":{"user":{"email":"me@me3.com","firstName":"co
浏览 5提问于2020-07-29得票数 0
回答已采纳
本机应用程序开发这是我尝试过的
文件: index.android.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Navigator,
TouchableHighlight,
Text,
View
} from 'react-native';
浏览 1提问于2017-03-21得票数 0
我创建了一个独立的头文件：
import React, { useContext } from "react";
import { Appbar } from "react-native-paper";
import { UserContext } from "../contexts/UserContext";
import { LanguageContext } from "../contexts/LanguageContext";
import localeSelect from "../services/locale
浏览 1提问于2020-04-30得票数 1
我正在开发我的第一个使用Navigator的react原生应用程序，我遇到了一个问题。每当我在<TouchableOpacity />上按下向导航器的推送时，应用程序就会冻结，无法再次按下。
这是我的代码
从‘react’导入React，{ Component }；
从‘react-TouchableOpacity’导入{AppRegistry，Navigator，Text，TouchableOpacity}；
从‘./src/ App’导入App；
从‘./src/ SinglePost /SinglePost’导入组件；
类AppNavigator扩展了组件{
renderS
浏览 4提问于2017-02-23得票数 0
回答已采纳
我正在使用React Native、Expo和React导航版本5。
这是我的应用程序根目录。
import React from "react";
import { StyleSheet, TouchableOpacity } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
impo
浏览 3提问于2020-08-18得票数 0
1回答
我有一个带有expo client的react本机应用程序，并给出了一个太多的重新呈现错误，我将发布这些文件，注意我使用react-native-paper.。
这是App.js，它是应用程序的包装器。
import React from "react";
import { Provider as PaperProvider, DefaultTheme } from "react-native-paper";
import { StatusBar } from "expo-status-bar";
import Homescreen from &
浏览 1提问于2020-09-30得票数 0
回答已采纳
我正在尝试在我的react本地应用程序中显示/隐藏组件。我正在使用的代码的精简版本受到了的启发。守则如下：
'use strict';
var React = require('react-native');
var {
Text,
Navigator,
} = React;
class SomePage extends Component {
constructor(props) {
super(props);
this.state = {
showView : true,
};
}
render
浏览 2提问于2016-04-16得票数 1
回答已采纳
我想在导航抽屉里安插一个导航堆栈。但这是行不通的。问题似乎是什么？
App.js (主文件)
import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AppLoading from 'expo-app-loading';
import Navigator from './routes/Dra
浏览 0提问于2021-03-17得票数 0
回答已采纳
1回答
我有3个底部选项卡在我的主屏幕堆栈。第一个选项卡是home，上面有一些按钮。在每个按钮的点击，一个新的屏幕应该显示。到目前为止，它还没有起作用。我一直在犯这个错误：
The action 'NAVIGATE' with payload {"name":"ScreenName"} was not handled by any navigator.
Do you have a screen named 'ScreenName'?
以下是我的导航者的概述：
StackNavigator -> Home Screen (Botto
浏览 2提问于2021-12-31得票数 0
我正在尝试使用react导航创建一个抽屉菜单。我想使用自定义的DrawerContent，当我使用该应用程序时会出现以下错误：“未定义不是一个对象(计算'state.routes')”。如果我评论这个特定的行，应用程序就会运行。
这是我的DrawerContent：
import {
DrawerContentScrollView,
DrawerItem,
DrawerItemList,
} from "@react-navigation/drawer";
import React from "react";
import { Tex
浏览 5提问于2022-02-09得票数 2
回答已采纳
我试图将堆栈和选项卡都添加到这里的视图中，但是在顶部显示了两个选项卡。我在任何地方都找不到解决方案，因为我想打开另一个不在选项卡导航中的屏幕，例如:当我单击Person按钮时，我需要打开不在选项卡导航中的详细信息屏幕。
如果您看到上面的图像im变得与我单击Profile时相同，则它的显示
人物
人物
在顶端
这是我的密码
import React from 'react';
import { Text, View, Dimensions } from 'react-native';
import { NavigationContainer } from
浏览 2提问于2022-02-05得票数 0
我正在构建一个音乐播放器，使用react-native-track-playe v1.2.3，所以我需要v2中的函数，所以我安装了npm i react-native-track-player@2.0.0-rc13，在我的项目中，package.json react-native`track-player已经在v2中，但当我重新加载项目时，出现了这个错误： ? 这是我的索引： import {AppRegistry} from "react-native";
import App from './App';
import {name as appNam
浏览 22提问于2021-01-09得票数 0
我想将我的导航菜单提取到一个自定义组件中，这样我就不必不断地重写代码。下面是我的简单dashboard.js
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
Navigator,
TouchableHighlight,
TouchableOpacity,
} from 'react-native';
let HeaderMenu = require('../../partials/headerMenu');
c
浏览 0提问于2016-11-04得票数 0
我试图在React-Native应用程序中使用Navigator，但遇到了问题。
在应用程序的开始，我加载了这个LoginScreen组件：
return <LoginScreen navigator={navigator}/>;
它有这样的特性：
class LoginScreen extends React.Component {
props: {
navigator: Navigator;
};
render() {
return (
<F8Button
style={styles.button}
浏览 0提问于2016-10-08得票数 1
回答已采纳
我让一切正常工作，直到我实现了Stack.Navigator；然后我得到了这个错误
这是我的stack.navigator：
<NavigationContainer>
<Stack.Navigator initialRouteName="Auth" screenOptions={{headerShown: false}} >
<Stack.Screen name="Register" component={Register} />
<Stack.Sc
浏览 6提问于2022-11-09得票数 0
我对安卓上的Stack.Navigator有个问题。只是因为一些奇怪的原因不能工作。
有简单的代码：
import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {ROUTES} from '../../constants/routes';
import {AuthScreen, LoginScreen, RegisterScreen} from './screens';
浏览 9提问于2022-11-29得票数 0
2回答
我的react-native Firebase APL有一个奇怪的错误。
react-native run-android运行正常，没有错误。
但react-native run-ios失败，类型为NSnull的JSON值无法转换为NSString。
源代码如下。(在firebase上进行身份验证的main和注册类)
我认为Firebase Class在ios和Android上有不同的ACT来将JSON转换为文本。
如有任何建议，欢迎光临。
Shoji
main
//在这里初始化firebase app，并根据需要传递给其他组件。仅在启动时初始化。
const firebaseApp
浏览 0提问于2016-11-26得票数 2
1回答
我正在开发的新闻应用程序使用的是react本机，我的问题是应用程序的启动或启动时间很慢(在主屏幕显示之前)，我希望您能给我建议，改进speed.It需要3到4秒左右的时间才能在我的手机上开始加载。
我的package.json是这样的：
{
"name": "tageblattapp",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-andr
浏览 2提问于2020-05-01得票数 1
回答已采纳
我根据react-native-navigation上的示例更改了AppDelegate.m文件。我将index.ios更改为index，因为react原生不再生成index.ios文件。
jsCodeLocation =[[RCTBundleURLProvidersharedSettings]jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import &#
浏览 0提问于2017-10-17得票数 1
我正在尝试使用react native开发一个todolist应用程序，为此我编写了主屏幕代码。我遵循了一些文档，但它给出了这个错误。请帮帮忙。我已经按以下顺序执行了这些命令。 expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/native
npm install @r
浏览 118提问于2020-05-02得票数 4
回答已采纳
我正在使用一个组件来完成我的应用程序中的所有路由。通过道具，这个组件中的所有函数都调用navigator.push。
一个例子..。
login(navigator) {
navigator.push({view: 'profile'});
}
showModal(navigator) {
navigator.push({
view: 'modal',
sceneConfig: Navigator.SceneConfigs.FloatFromBottom
});
}
当我通过登录函数导航到配置文件时，它会使
浏览 2提问于2016-02-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
