Блог

Главная - Вопросы по программированию - React navigation 5 очень медленно и сбрасывает JS FPS на Expo

React navigation 5 очень медленно и сбрасывает JS FPS на Expo

#javascript #android #react-native #expo #react-navigation

#javascript #Android #react-родной #expo #react-навигация

Вопрос:

В настоящее время я работаю над приложением React Native (Expo) и сталкиваюсь с некоторыми проблемами производительности. Я пока не нашел ответа на свою проблему, поэтому надеюсь, что кто-нибудь сможет мне помочь.

Моя проблема в том, что всякий раз, когда я запускаю приложение на своем физическом устройстве (Galaxy S9 ) и перехожу на разные экраны, я замечаю, что JS-кадры падают с 60 до 10-30. У меня есть навигатор главного ящика, навигатор нижней вкладки и несколько навигаторов стека. У меня есть базовый компонент View, Text, …, поэтому я не думаю, что это связано с тяжелыми компонентами.(Я использую react-navigation v5 )

Я также должен упомянуть, что я действительно не вижу никакого снижения производительности или снижения JS FPS в симуляторе iOS.

Ответ №1:

Устройства Android намного более чувствительны к неоптимизированному коду JavaScript, потому что они обычно имеют гораздо худшую производительность JS по сравнению с устройствами iOS, поэтому у вас меньше возможностей для написания неэффективного кода. Тот же код, который выполняется на iOS, может работать плавно, а на Android он может часто отбрасывать кадры.

Рекомендуется использовать React Devtools, чтобы понять источник низкой производительности рендеринга в приложениях React, и я думаю, что это прекрасный вариант здесь, и вы, безусловно, должны это сделать.

Еще одна вещь, которую вы можете сделать, это переключиться на createNativeStackNavigator, где бы вы ни использовали createStackNavigator , и это поможет немного снизить некоторые ваши проблемы с производительностью в будущем. Вы также можете узнать больше об этом навигаторе в этом видео на YouTube.

Я бы лично сделал оба вышеперечисленных прямо сейчас: 1) профилируйте производительность рендеринга React и найдите, где вы выполняете ненужную / дополнительную работу, устраните это. 2) переключитесь на использование createNativeStackNavigator .

Комментарии:

1. Спасибо за ваш ответ @brentvatne. Я действительно ценю, я попробую оба и дам вам знать как можно скорее. Хорошего дня!

2. Еще раз спасибо @brentvatne Я только что переключился createNativeStackNavigator , и все работает отлично. Я больше не получаю падения JS FPS!

Ответ №2:

Создайте свою собственную анимацию

Эта анимация сделает ваше приложение более быстрым

  const App = () => {   
   const Stack = createStackNavigator();

   const TransitionScreen = {
    gestureDirection: 'horizontal',
    transitionSpec: {
      open: TransitionSpecs.TransitionIOSSpec,
      close: TransitionSpecs.TransitionIOSSpec,
    },
    cardStyleInterpolator: ({current, next, layouts}) => {
      return {
        cardStyle: {
          transform: [
            {
              translateX: current.progress.interpolate({
                inputRange: [0, 1],
                outputRange: [layouts.screen.width, 0],
              }),
            },
            {
              translateX: next
                ? next.progress.interpolate({
                    inputRange: [0, 1],
                    outputRange: [0, -layouts.screen.width],
                  })
                : 1,
            },
          ],
        },
        overlayStyle: {
          opacity: current.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 0.5],
          }),
        },
      };
    },
 

     };
    
      const CardOptions = {
        cardStyle: {backgroundColor: 'transparent'},
        ...TransitionScreen,
        headerShown: false,
        gestureEnabled: false,
      };

 return (
    <NavigationContainer theme={DarkTheme}>
      <Stack.Navigator>
        <Stack.Screen
          name="preloader"
          component={PreLoader}
          options={CardOptions}
        />
      </Stack.Navigator>
    </NavigationContainer>  
 );
 };
    
    export default App;