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

Question

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

然后我注意到这里提供InteractionManager.runAfterInteractionsapi来解决这个问题,

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

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

谢谢你的时间.

Answer 1

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

这已被提取到库中以使其更容易:

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

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