如何使用 InteractionManager.runAfterInteractions 使导航器转换更快

由于逻辑复杂，我必须渲染很多组件this.props.navigator.push()，缓慢的导航器转换使应用程序不可用。

然后我注意到here http://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions提供InteractionManager.runAfterInteractionsapi来解决这个问题，

我需要在导航器动画完成后将花费很长时间的大部分组件带到回调中，但我不知道应该在哪里调用它，

也许一个简单的例子就足够了，

谢谢你的时间。

这是表演者的完整示例Navigator https://facebook.github.io/react-native/docs/navigator.html场景可能看起来像：

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

这已被提取到图书馆 https://github.com/jshanson7/react-native-interactions让事情变得更容易：

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

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