cómo utilizar InteractionManager.runAfterInteractions hacer que las transiciones de browser sean más rápidas

Debido a la lógica compleja, tengo que procesar muchos componentes cuando this.props.navigator.push() , las transiciones del browser lento hacen que la aplicación no esté disponible.

introduzca la descripción de la imagen aquí

entonces noto aquí proporcionar InteractionManager.runAfterInteractions api para resolver este problema,

Necesito llevar la mayoría de los componentes que consumieron mucho time para la callback después de que la animation del browser terminó, pero no sé dónde debería llamarlo,

tal vez un simple ejemplo sea suficiente,

gracias por tu time.

Aquí hay un ejemplo completo de cómo se vería una escena de Navigator performant:

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

Esto se ha extraído en una biblioteca para hacerlo aún más fácil:

 import {AfterInteractions} from 'react-native-interactions'; function MyScene() { return ( <AfterInteractions placeholder={<CheapPlaceholder/>}> <ExpensiveComponent/> </AfterInteractions> ); } 

Eche un vistazo a https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

Allí puede encontrar un ejemplo de cómo implementar marcadores de position para get transiciones más rápidas.

Debe pasar cualquier código que esté manteniendo el subprocess de JS ocupado en InteractionManager, por ejemplo,

 InteractionManager.runAfterInteractions(() => { someLongTask() // or animations, or whatever }) 
 import {InteractionManager} from "react-native"; componentDidMount() { InteractionManager.runAfterInteractions(() => { this.setState({renderPlaceholderOnly: false}); }); } 

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