come utilizzare InteractionManager.runAfterInteractions velocizza le transizioni del navigatore

Question

A causa della logica complessa, devo rendere molti componenti quando this.props.navigator.push(), le transizioni lente del navigatore rendono l'app non disponibile.

poi mi accorgo here fornisco InteractionManager.runAfterInteractions api per risolvere questo problema,

ho bisogno di portare la maggior parte delle componenti che hanno consumato molto tempo per callback dopo l'animazione navigatore finita, ma io non so dove dovrebbe io lo chiamo,

forse un semplice esempio è sufficiente,

grazie per il vostro tempo.

Answer 1

Ecco un esempio completo di ciò che un performante Navigator scena potrebbe essere simile:

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

Questo è stato estratto in a library per rendere ancora più facile :

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

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

Answer 2

Date un'occhiata a https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

Vi si possono trovare un esempio di come implementare i segnaposto per ottenere una transizione più veloce!

Answer 3

È necessario passare qualsiasi codice che mantiene occupato il thread JS per InteractionManager, ad es.

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

Answer 4

import {InteractionManager} from "react-native"; 

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

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