android - React Navigation 速度极慢
问题描述
在过去的 5 个月中,我们一直在开发的应用程序中使用 react-navigation。
从昨天开始,反应导航器开始以 4-8 秒的延迟导航到屏幕。我已经删除了在 screenProps 中传递的所有变量,但它仍然存在同样的问题。
我正在通过检查执行 navigate() 函数之前和 componentWillMount() 之间的时间来测试延迟,我在两者之间得到 4-8 秒。任何更有经验的人都知道为什么 navigate() 需要这么长时间?
没有在导航器中进行一些更改,它只是开始以这种方式运行:|
我正在真正的 android 设备上进行调试模式测试,但我已经发布了测试版本,但延迟仍然存在。
我的导航器:
import React, { Component } from 'react';
import { createStackNavigator, HeaderBackButton, createAppContainer } from 'react-navigation';
import { colors } from 'assets/styles/colors.js';
import RegistrationInputScreen from 'components/Registration/Input.js';
import RegistrationVerificationScreen from 'components/Registration/Verification.js';
import MainScreen from 'screens/MainScreen';
import Conversation from 'components/Messages/Conversation';
import Private from 'components/FirstTime/Private.js';
import Description from 'components/FirstTime/Description.js';
import CategoriesScreen from 'components/FirstTime/CategoriesScreen.js';
import Professional from 'components/FirstTime/Professional.js';
import Home from 'components/Home.js';
import SecretScreen from 'screens/SecretScreen.js';
import Map from 'components/Map/Map.js';
import ProfileScreen from 'components/Profile/Profile.js';
import EditProfile from 'components/Profile/EditProfile.js';
import PublicProfile from 'components/Profile/PublicProfile.js';
import Settings from 'components/Profile/Settings';
import {setTopLevelNavigator, navigate} from './NavigationService';
export default class RootNavigator extends Component {
constructor(props){
super(props)
}
render() {
console.log("PROPERTIES IN ROOT NAVIGATOR", this.props);
return (
<Navigator />
);
}
}
// ref={navigatorRef => {
// setTopLevelNavigator(navigatorRef);
// }}
export const RootNav = createStackNavigator(
{
RegistrationOptions: {
screen: Home,
navigationOptions: {
header: null
},
},
RegistrationInput: {
screen: RegistrationInputScreen,
navigationOptions: ({navigation}) => (setHeader(null, navigation))
},
RegistrationVerification: {
screen: RegistrationVerificationScreen,
navigationOptions: ({navigation}) => (setHeader('Registration Verification1', navigation))
},
Map: {
screen: Map,
navigationOptions: {
header: null
}
},
MainScreen: MainScreen,
Private: {
screen: Private,
navigationOptions: ({navigation}) => (setHeader('Introduce yourself', navigation))
},
Interests: {
screen: CategoriesScreen,
navigationOptions: ({navigation}) => (setHeader('Back', navigation))
},
Description: {
screen: Description,
navigationOptions: ({navigation}) => (setHeader('Describe yourself', navigation))
},
Professional: {
screen: Professional,
navigationOptions: ({navigation}) => (setHeader('Professional', navigation))
},
Conversation: {
screen: Conversation,
navigationOptions: ({navigation}) => (setHeader(null, navigation))
},
Secret: {
screen: SecretScreen,
navigationOptions: ({navigation}) => (setHeader('Configure app', navigation))
},
Profile: {
screen: ProfileScreen,
navigationOptions: ({navigation}) => (setHeader('Profile', navigation))
},
Public: {
screen: PublicProfile,
navigationOptions: ({navigation}) => (setHeader('Profile', navigation))
},
EditProfile: {
screen: EditProfile,
navigationOptions: ({navigation}) => (setHeader('Edit profile', navigation))
},
Settings: {
screen: Settings,
navigationOptions: ({navigation}) => (setHeader('Settings', navigation))
},
}
);
export const Navigator = createAppContainer(RootNav);
const setHeader = (title=null, navigation) => {
let options = {
title: title,
headerStyle: {
backgroundColor: colors.bgRed,
shadowOpacity: 0,
shadowOffset: {
height: 0,
},
shadowRadius: 0,
elevation: 0
},
headerTitleStyle: { color:colors.white },
headerTransitionPreset: {headerMode: 'screen'},
cardShadowEnabled: false,
headerLeft: (
<HeaderBackButton
tintColor={colors.white} onPress={() => navigation.dispatch({ type: 'Navigation/BACK' }) }
/>
)
}
if(title === null) delete options.title;
return options;
}
解决方案
问题再次出现,我的动画也非常慢。我发现禁用远程调试是导航器导航速度慢和动画速度变慢的原因。如果其他人遇到这种情况,请尝试禁用远程调试。
推荐阅读
- javascript - 在three.js中围绕它的y轴旋转一个3D对象
- python - Flask 模板导致重复的 HTML
- perl - 交替循环嵌套 foreach 循环
- amazon-web-services - AWS Cognito - RESET_REQUIRED 重定向不起作用
- android - 使用 Lime/OpenFL 编译 android 时出错。无法获取 Java 版本(Windows 10)
- php - PHP索引数组到嵌套关联数组
- reactjs - antd 标签使用 react-router
- python - 这个使用 petl 的 lambda 函数有什么问题?
- github - 只有在 Travis 测试通过后才部署用户 Github 页面
- r - 仅命名列表中许多数据框的一列