反应导航速度非常慢

Question

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

从昨天开始，反应导航器开始以 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;
}

Answer 1

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

Answer 2

我的解决方法是在我的组件中侦听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：我最初在 React 导航上发布了这个问题

Answer 3

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

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

Answer 4

当我遇到导航问题时，这是由于我的屏幕渲染非常沉重造成的。您的屏幕中可能有一些东西会导致这种性能吗？尝试只return null;屏幕渲染，看看问题是否仍然存在。

您使用哪个版本的反应导航？

Answer 5

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

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

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