InteractionManager.runAfterInteractions nasıl kullanılır? Navigator geçişlerini daha hızlı hale getirir

Question

Karmaşık mantık nedeniyle, this.props.navigator.push(), yavaş navigasyon geçişleri uygulamayı kullanılamaz hale getirdiğinde birçok bileşeni işlemek zorundayım. Ben here fark bu sorunu çözmek için InteractionManager.runAfterInteractions api sağlamak sonra

,

ben gezgini animasyon bittikten sonra geri çağırma uzun zaman tüketilen, ancak bileşenlerin çoğu nerede bilmiyorum getirmek gerek

gerektiği Ben,

belki basit bir örnek yeterlidir, zaman ayırdığınız için

sayesinde diyoruz.

Answer 1

bir performant Navigator sahne nasıl görünebileceğini tam bir örnek :

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

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

Answer 2

daha hızlı geçişler almak için yer tutucular nasıl uygulanacağı bir örnek bulabilirsiniz https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions Orada

bir göz atın!

Answer 3

JS iş parçacığını meşgul eden herhangi bir kodu InteractionManager'a, örn.

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

Answer 4

import {InteractionManager} from "react-native"; 

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

Referans:

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

Bu a library içine ayıklanmış olan daha da kolaylaştırmak için: Burada https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions