在过去的5个月中,我们一直在开发的应用程序中使用react-navigation。
从昨天开始,反应导航器开始以4-8秒的延迟导航到屏幕。我删除了在screenProps中传递的所有变量,但仍然存在相同的问题。
我正在通过检查在执行navigation()函数之前以及componentWillMount()之间的时间来测试延迟,我在这之间得到了4-8秒的时间。任何有经验的人都知道为什么navigation()会花费这么长时间?
它没有对导航器进行任何更改,它只是开始以这种方式进行操作:|
我正在实际的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;
}
问题再次开始出现,我的动画也非常慢。我发现禁用远程调试是导航器缓慢导航和动画缓慢的原因。如果其他人遇到这种情况,请尝试禁用远程调试。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句