how to use InteractionManager.runAfterInteractions make navigator transitions faster

问题

Because of complex logic, I have to render many components when this.props.navigator.push(), slow navigator transitions make app unavailable.

then I notice here provide InteractionManager.runAfterInteractions api to solve this problem,

I need bring most of components which consumed long time to callback after navigator animation finished, but I don't know where should I call it,

maybe a simple example is enough,

thanks for your time.

回答1:

Here's a full example of what a performant Navigator scene might look like:

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

This has been extracted into a library to make it even easier:

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

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

回答2:

Take a look at https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

There you can find an example of how to implement placeholders to get faster transitions!

回答3:

You should pass any code that is keeping the JS thread busy to the InteractionManager, e.g.

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

回答4:

import {InteractionManager} from "react-native"; 

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

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

来源：https://stackoverflow.com/questions/36127185/how-to-use-interactionmanager-runafterinteractions-make-navigator-transitions-fa

标签

ios

react-native

navigator