InteractionManager.runAfterInteractionsを使用すると、ナビゲータの遷移が速くなります

Question

複雑なロジックのため、this.props.navigator.push()の場合、ナビゲータの遷移が遅いとアプリケーションを使用できなくなるため、多くのコンポーネントをレンダリングする必要があります。

その後、私は私がナビゲーターアニメーションが終了した後にコールバックするのに長い時間を消費部品のほとんどを持って来る必要があるが、私はどこべきかわからない

、この問題を解決するためのInteractionManager.runAfterInteractionsのAPIを提供しhere気づきます私は多分簡単な例は、お時間を

おかげで十分です

、それを呼び出します。

Answer 1

はここパフォーマンスNavigatorシーンがどのように見えるかの完全な例です：

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

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

Answer 2

は、あなたがより速く遷移を取得するには、プレースホルダを実装する方法の例を見つけることができますがありhttps://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

を見てみましょう！

Answer 3

JSスレッドをビジー状態にしているコードをInteractionManagerに渡す必要があります。

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

Answer 4

import {InteractionManager} from "react-native"; 

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

参考：これは、それをさらに容易にするためにa libraryに抽出された

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

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