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

由于逻辑复杂,我必须在this.props.navigator.push(),慢导航器转换使应用程序不可用时渲染许多组件.

然后我注意到here提供了InteractionManager.runAfterInteractions api来解决这个问题,

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

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

谢谢你的时间.

解决方法

以下是高性能 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>
  );
}