jak używać InteractionManager.runAfterInteractions dokonać przejścia Navigator szybciej

Question

powodu skomplikowanej logiki, muszę uczynić wiele elementów podczas this.props.navigator.push() powolne przejścia Navigator dokonać app niedostępne.

wtedy zauważam here zapewnić InteractionManager.runAfterInteractions api, aby rozwiązać ten problem,

muszę przynieść większość elementów, które spożywane długo po zakończeniu animacji Callback nawigator, ale nie wiem, gdzie należy ja to nazywam,

może prosty przykład wystarczy,

dzięki za poświęcony czas.

Answer 1

Oto pełna przykładem tego, co wydajnych Navigator scena może wyglądać tak:

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

Zostało ekstrahowano a library się jeszcze łatwiejsze :

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

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

Answer 2

Spójrz na https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

Można tam znaleźć przykład, jak wdrożyć zastępcze, aby uzyskać szybsze przejścia!

Answer 3

Należy zdać każdy kod jest prowadzenie nici JS zajęty na interactionManager np

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

Answer 4

import {InteractionManager} from "react-native"; 

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

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