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

Question

由于逻辑复杂，我必须在-Dsonar.svn.username时渲染许多组件，慢速导航器转换使应用程序不可用。

然后我注意到here提供了this.props.navigator.push() api来解决这个问题，

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

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

谢谢你的时间。

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

这已被提取到a library中，以使其更加轻松：

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

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

Answer 2

查看https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

在那里你可以找到一个如何实现占位符以获得更快转换的示例！

Answer 3

import {InteractionManager} from "react-native"; 

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

参考：https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

Answer 4

您应该将保持JS线程繁忙的任何代码传递给InteractionManager，例如

InteractionManager.runAfterInteractions(() => {
    someLongTask() // or animations, or whatever
})