web-dev-qa-db-ja.com

InteractionManager.runAfterInteractionsを使用して、ナビゲーターの遷移を高速化する方法

複雑なロジックのため、this.props.navigator.Push()、ナビゲーターの遷移が遅いためにアプリが使用できない場合、多くのコンポーネントをレンダリングする必要があります。

enter image description here

次に気づく ここ 提供InteractionManager.runAfterInteractionsこの問題を解決するAPI、

ナビゲーターのアニメーションが終了した後、長い時間を費やしたコンポーネントのほとんどをコールバックする必要がありますが、どこに呼び出せばよいのかわかりません。

多分単純な例で十分です

御時間ありがとうございます。

iosreact-nativenavigator
13
E_Jovi

パフォーマンスの詳細な例 Navigator は次のようになります：

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/>
    );
  }
}

これは a library に抽出され、さらに簡単になっています。

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

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

https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions をご覧ください

そこでは、より迅速な移行を実現するためにプレースホルダーを実装する方法の例を見つけることができます！

0
pinewood

JSスレッドをビジー状態に保つコードをInteractionManagerに渡す必要があります。

InteractionManager.runAfterInteractions(() => {
    someLongTask() // or animations, or whatever
})
0
rops
import {InteractionManager} from "react-native"; 

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

リファレンス： https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

0
CodeGuru