React Navigation极其缓慢

Question

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

从昨天开始，反应导航器开始导航到屏幕，延迟时间为4-8秒。我已经删除了在screenProps中传递的所有变量，但它仍然存在同样的问题。

我正在通过检查执行navigate（）函数之前的时间以及componentWillMount（）之间的时间来测试延迟，我之间的时间间隔为4-8秒。任何更有经验的人都知道为什么导航（）需要这么长时间？

没有对导航器进行一些更改，它刚刚开始这样做：|

我正在真正的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;
}

Answer 1

当我有导航问题时，它是由我的屏幕渲染引起的，这非常沉重。你可能在屏幕上有一些导致这种性能的东西吗？尝试在你的屏幕渲染中只是return null;，看看问题是否仍然存在。

你使用哪个版本的react-navigation？

Answer 2

由于在后台加载大量数据或在应用程序中呈现时出现此问题

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

Answer 3

由于没有正确的代码我可以看到问题。但是反应导航动画线程是主要问题。根据我的经验，你可以使用InteractionManager。

只需使用以下代码等待渲染。

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

Answer 4

问题再次出现，我的动画也非常慢。我发现禁用远程调试是导航器慢速导航和动画速度减慢的原因。如果有其他人遇到此问题，请尝试禁用远程调试。