web-dev-qa-db-fra.com

comment utiliser InteractionManager.runAfterInteractions accélère les transitions du navigateur

En raison de la logique complexe, je dois rendre de nombreux composants lorsque this.props.navigator.Push(), les transitions lentes du navigateur rendent l’application indisponible.

 enter image description here

alors je remarque ici fournit InteractionManager.runAfterInteractions api pour résoudre ce problème, 

Je dois apporter la plupart des composants qui ont pris beaucoup de temps pour rappeler une fois l'animation du navigateur terminée, mais je ne sais pas comment l'appeler, 

peut-être qu'un simple exemple suffit,

merci pour votre temps.

iosreact-nativenavigator
10
E_Jovi

Voici un exemple complet de ce à quoi une scène Navigator pourrait ressembler:

import {Component} from 'react';
import {InteractionManager, Text} from 'react-native';

class OptimizedScene extends Component {

  state = {interactionsComplete: false};

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.setState({interactionsComplete: true});
    });
  }

  render() {
    if (!this.state.interactionsComplete) {
      return <Text>loading...</Text>;
    }

    return (
      <ExpensiveComponent/>
    );
  }
}

Ceci a été extrait dans une bibliothèque pour le rendre encore plus facile:

import {AfterInteractions} from 'react-native-interactions';

function MyScene() {
  return (
    <AfterInteractions placeholder={<CheapPlaceholder/>}>
      <ExpensiveComponent/>
    </AfterInteractions>
  );
}
27
jshanson7

Jetez un coup d’œil à https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

Vous y trouverez un exemple sur la manière de mettre en œuvre des espaces réservés pour obtenir des transitions plus rapides!

0
pinewood
import {InteractionManager} from "react-native"; 

componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.setState({renderPlaceholderOnly: false});
    });
  }

Référence: https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

0
CodeGuru