wie Sie InteractionManager.runAfterInteractions verwenden Navigatorübergänge schneller machen

Question

Aufgrund komplexer Logik muss ich viele Komponenten rendern, wenn this.props.navigator.push() langsame Navigatorübergänge die App nicht verfügbar machen.

dann here liefern Ich bemerke InteractionManager.runAfterInteractions api dieses Problem zu lösen,

ich die meisten Komponenten mitbringen müssen, die lange Zeit, um Rückruf nach Navigator Animation verbraucht fertig, aber ich weiß nicht, wo sollte ich nenne es,

vielleicht ein einfaches Beispiel ist genug,

dank für Ihre Zeit.

Answer 1

Hier ist ein vollständiges Beispiel von dem, was eine performante Navigator Szene aussehen könnte:

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

Das in a library extrahiert wurde, um es noch einfacher :

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

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

Answer 2

Werfen Sie einen Blick auf https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

Dort können Sie ein Beispiel finden, wie Platzhalter zu implementieren schnellen Übergänge zu erhalten!

Answer 3

Sie sollten jeglichen Code, der den JS-Thread beschäftigt, an den InteractionManager übergeben, z.

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

Answer 4

import {InteractionManager} from "react-native"; 

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

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