反应导航速度极慢

天体

在过去的5个月中,我们一直在开发的应用程序中使用react-navigation。

从昨天开始,反应导航器开始以4-8秒的延迟导航到屏幕。我删除了在screenProps中传递的所有变量,但仍然存在相同的问题。

我正在通过检查在执行na​​vigation()函数之前以及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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSV生成速度极慢

来自分类Dev

下载速度极慢

来自分类Dev

HDD的写入速度极慢

来自分类Dev

USB传输速度极慢

来自分类Dev

硬盘速度极慢

来自分类Dev

硒读取DOM的速度极慢

来自分类Dev

OpenWrt UEFI的启动速度极慢?

来自分类Dev

OPC-UaFx采样速度极慢

来自分类Dev

Coldfusion cfloop Sql查询速度极慢

来自分类Dev

Wifi降到极慢的速度-请帮忙!

来自分类Dev

极慢的下载速度,但下游表现良好

来自分类Dev

由于子查询,查询速度极慢

来自分类Dev

在Ubuntu 17.04上极慢的启动速度

来自分类Dev

使用 DataBinding 的 ListBox 填充速度极慢

来自分类Dev

SQLite 通过 C-API 速度极慢

来自分类Dev

查询速度极慢 - 使用 google sql cloud

来自分类Dev

反应导航:从儿童导航

来自分类Dev

phpInAdmin加载innoDB数据库主页时速度极慢

来自分类Dev

Visual Studio 2015社区-XAML Desginer加载速度极慢

来自分类Dev

15.10中显示JPEG和其他图像的速度极慢

来自分类Dev

使用 Gparted 调整分区后,Ubuntu 启动速度极慢

来自分类Dev

通过 BT 反向绑定 Macbook Pro 和 iPad 速度极慢

来自分类Dev

Mac OneDrive 迁移速度极慢 - 100 mb/小时

来自分类Dev

wkhtmltopdf 在不同环境下运行速度极慢

来自分类Dev

从 19.10 更新到 20.04 后,戴尔 XPS 13 速度极慢

来自分类Dev

Keras 出现内存分配错误并且运行速度极慢

来自分类Dev

谷歌云函数 + 实时数据库速度极慢

来自分类Dev

在导航功能异步 - 反应导航 - 本土反应

来自分类Dev

反应导航堆栈导航转换