Реактивная навигация крайне замедлена

Question

Мы используем реагирующую навигацию в приложении, которое мы разрабатываем последние 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

Проблема начала появляться снова, и мои анимации также были очень замедлены. Я обнаружил, что отключение удаленной отладки было причиной медленной навигации навигатора и замедленной анимации. В случае, если кто-то еще испытывает это, попробуйте отключить удаленную отладку.

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

Когда у меня была проблема с навигацией, это было вызвано рендерингом моего экрана, который был очень тяжелым.Можете ли вы иметь некоторые вещи на вашем экране, которые вызывают это представление?Попробуйте просто return null; при рендеринге экрана и посмотрите, сохраняется ли проблема.

Какую версию реактивной навигации вы используете?