反应导航速度极慢

Question

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

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

我正在测试这个延迟，方法是检查执行导航()函数之前的时间，以及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

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

Answer 2

此问题是由于在后台或在应用程序中呈现时加载大量数据造成的。 例如:如果您有一个项目列表，并且当您输入应用程序时，列表数据非常大，那么整个数据将无法在一次时间内呈现，在向下滚动列表时需要时间。因此，在这种情况下，您可以添加分页，如加载更多的数据或过滤器。试着检查哪个屏幕上有大量的数据被加载。

Answer 3

我的解决办法是在组件中侦听focus，并可选地侦听transitionEnd事件，当它还没有准备好时，我就呈现一个占位符。屏幕过渡将是平稳的。

// 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 />}
    </>
  )
}

只是一个解决办法。

这不是一个解决方案，因为如果您的组件很重，它仍然阻塞js线程，上面的react-navigation-heavy-screen解决方案也是如此(参见下面的PS )。虽然页面过渡将是顺利的，同样，与上述解决方案相同。

PS:我最初发布的是在这个关于反应导航的问题上