Android 我们的航行速度极慢

在过去的5个月里，我们一直在开发一款应用程序中使用react导航

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

我通过检查navigate（）函数执行之前以及组件Willmount（）之间的时间来测试延迟，中间有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;
}

import React，{Component}来自'React'；
从“反应导航”导入{createStackNavigator、HeaderBackButton、createAppContainer}；
从“assets/styles/colors.js”导入{colors}；
从“components/Registration/Input.js”导入RegistrationInputScreen；
从“components/Registration/Verification.js”导入注册验证屏幕；
从“屏幕/主屏幕”导入主屏幕；
从“组件/消息/对话”导入对话；
从“components/FirstTime/Private.js”导入Private；
从“components/FirstTime/Description.js”导入说明；
从“components/FirstTime/CategoriesScreen.js”导入分类屏幕；
从“components/FirstTime/Professional.js”导入Professional；
从“components/Home.js”导入Home；
从“screens/SecretScreen.js”导入SecretScreen；
从“components/Map/Map.js”导入地图；
从“components/Profile/Profile.js”导入ProfileScreen；
从“components/Profile/EditProfile.js”导入EditProfile；
从“components/Profile/PublicProfile.js”导入PublicProfile；
从“组件/配置文件/设置”导入设置；
从“/NavigationService”导入{setTopLevelNavigator，navigate}；
导出默认类RootNavigator扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
log（“根导航器中的属性”，this.props）；
返回(
);
}
}
//ref={navigatorRef=>{
//setTopLevelNavigator（navigatorRef）；
// }}
export const RootNav=createStackNavigator(
{
注册选项：{
屏幕：主页，
导航选项：{
标题：空
},
},
登记投入：{
屏幕：注册输入屏幕，
导航选项：（{navigation}）=>（setHeader（null，导航））
},
注册验证：{
屏幕：注册验证屏幕，
导航选项：（{navigation}）=>（setHeader（'Registration Verification1'，navigation））
},
地图：{
屏幕：地图，
导航选项：{
标题：空
}
},
主屏幕：主屏幕，
私人：{
屏幕：私人，
导航选项：（{navigation}）=>（setHeader（'自我介绍'，导航））
},
兴趣：{
屏幕：分类屏幕，
导航选项：（{navigation}）=>（setHeader（'Back'，navigation））
},
说明：{
屏幕：描述，
导航选项：（{navigation}）=>（setHeader（'description yourself'，navigation））
},
专业人士：{
屏幕：专业，
导航选项：（{navigation}）=>（setHeader（'Professional'，导航））
},
对话：{
屏幕：对话，
导航选项：（{navigation}）=>（setHeader（null，导航））
},
秘密：{
屏幕：SecretScreen，
导航选项：（{navigation}）=>（setHeader（'Configure app'，navigation））
},
简介：{
屏幕：ProfileScreen，
导航选项：（{navigation}）=>（setHeader（'Profile'，导航））
},
公众：{
屏幕：PublicProfile，
导航选项：（{navigation}）=>（setHeader（'Profile'，导航））
},
编辑配置文件：{
屏幕：EditProfile，
导航选项：（{navigation}）=>（setHeader（'editprofile'，导航））
},
设置：{
屏幕：设置，
导航选项：（{navigation}）=>（setHeader（'Settings'，navigation））
},
}
);
export const Navigator=createAppContainer（RootNav）；
const setHeader=（title=null，导航）=>{
让选项={
标题:标题,，
头型：{
背景颜色：colors.bgRed，
阴影不透明度：0，
阴影偏移：{
高度:0,，
},
阴影半径：0，
海拔：0
},
headerTitleStyle:{color:colors.white}，
headerTransitionPreset:{headerMode:'screen'}，
cardShadowEnabled:false，
左校长：(
分派（{type:'navigation/BACK'}）}
/>
)
}
如果（title==null）删除options.title；
返回选项；
}

当我遇到导航问题时，它是由我的屏幕渲染造成的，我的屏幕非常沉重。 您的屏幕上可能有一些导致此性能的东西？尝试只

返回null在屏幕的渲染中，查看问题是否仍然存在

您使用哪个版本的react导航

出现此问题的原因是在中加载了大量数据
背景或在应用程序中渲染时

例如：如果您有一个项目列表，并且当您进入应用程序时
而且列表数据非常大，整个数据将无法
只需一次渲染，向下滚动列表需要一段时间。所以
在这种情况下，您可以添加分页，如加载更多数据或
过滤器。
尝试检查哪个屏幕中加载了大量数据

因为没有合适的代码，我可以看到问题。但是用react导航动画线程是主要问题。根据我的经验，您可以使用
InteractionManager

只需使用下面的代码等待渲染

state = { is_initiated: false };
 componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
        this.setState({'is_initiated': true });
    }); 
}
render() {
  if(this.state.is_initiated) {
   return (<Component />);
  } else {
       return (<Loader />);
    }
}

state={is_initiated:false}；
componentDidMount（）{
InteractionManager.runAfterInteractions（（）=>{
T
// useIsReady.ts

import { useNavigation } from '@react-navigation/native'
import React from 'react'

const useIsReady = (stack: boolean = true) => {
  const navigation = useNavigation()
  const [isReady, setIsReady] = React.useState(false)
  React.useEffect(() => {
    const unsubscribeFocus = navigation.addListener('focus', () => {
      if (!isReady) setIsReady(true)
    })

    const unsubscribeTransitionEnd = stack
      ? // @ts-ignore
        navigation.addListener('transitionEnd', () => {
          if (!isReady) setIsReady(true)
        })
      : undefined

    return () => {
      unsubscribeFocus()
      unsubscribeTransitionEnd && unsubscribeTransitionEnd()
    }
  }, [])
  return isReady
}

export default useIsReady

const HeavyComponentThatMakeNavigationLooksCrap = () => {
  const isReady = useIsReady()
  return isReady ? ... : <Placeholder />
}

const ScreenWithMultipleHeavyComponents = () => {
  const isReady = useIsReady()
  return isReady ? ... : <ScreenPlaceholder />
  // or
  return (
    <>
       ...
       {isReady ? ... : <ComponentsPlaceholder />}
    </>
  )
}