реагировать на собственные характеристики навигации - PullRequest
Новая
       46

реагировать на собственные характеристики навигации

0 голосов
/ 15 октября 2018

У меня проблема с React Native Navigation V2, из-за которой у меня достаточно долгое время ожидания до следующего экрана.

И я прочитал, что это кажется нормальным, так как реагирует на нативное отображение всех компонентов нового экрана.

Поэтому мне было интересно, существуют ли определенные шаблоны для повышения производительности или способыскрыть время загрузки (через круги загрузки или переходы)?

Ответы [ 2 ]

0 голосов
/ 16 октября 2018

Благодаря предложению @Wainage я использовал InteractionManager 

import PropTypes from "prop-types";
import React from "react";
import {
    InteractionManager,
    Text,
   View,
} from "react-native";

interface State {
   ready: boolean;
   sortedJobs: any[];
}


export default class ProviderJobs extends React.Component<Props, State> {
    constructor(props) {
       super(props);
       this.state = {
          ready: false,
       };
    }

   public componentDidMount() {
       InteractionManager.runAfterInteractions(() => {
           // Do expensive Stuff such as loading
           this.setState({
               ready: true,
               sortedJobs: groupJobs(this.props.jobs), // loading Jobs in my Case
        });

    });
}

   public render() {
       if (!this.state.ready || this.state.sortedJobs.length == 0) {
           return <LoadingCircle/>;
       }


       return (
           <View>
               <DisplayJobs jobs ={this.state.sortedJobs}>
           </View>
       );
   }
}
0 голосов
/ 15 октября 2018

Да, обычно это происходит, если у вас много компонентов для рендеринга.Реагирующая навигация ожидает установки компонента и затем переключается на экран.Например, если для отображения всех компонентов на экране потребуется 2 секунды.Затем, чтобы перейти к этому экрану, реагирующая навигация займет 2 секунды.Есть способ уменьшить время, чтобы перейти к следующему экрану.Вы можете использовать intreractionManager или Вы можете сделать что-то вроде

Сначала сохраните ваше состояние, скажем, loading в true.И в вашем componentDidMount() Вы можете написать что-то вроде: 

setTimeout(() => this.setState({ loading: false }), 0);

И в вашей функции рендеринга, в родительском представлении, сделайте условный рендеринг, например 

{this.state.loading && <View> 
... your components
</View>}

При таком подходе,Компонент будет монтироваться быстро, так как componentDidMount() будет быстро разрешен, так как компоненту нечего визуализироватьТакже, если вы используете flatlist или listview, вы можете назначить опору initialRender на 3 или что-то подобное, чтобы уменьшить время загрузки.Так.первоначально отображать только одно пустое представление, а после этого отображать все остальное.

...