làm thế nào để sử dụng InteractionManager.runAfterInteractions làm cho chuyển tiếp navigator nhanh hơn

Question

Vì logic phức tạp, tôi phải hiển thị nhiều thành phần khi this.props.navigator.push(), chuyển tiếp điều hướng chậm làm cho ứng dụng không khả dụng.

sau đó tôi nhận thấy here cung cấp InteractionManager.runAfterInteractions api để giải quyết vấn đề này,

Tôi cần mang hầu hết các thành phần trong đó tiêu thụ thời gian dài để gọi lại sau khi hoa tiêu hoạt hình xong, nhưng tôi không biết nơi nên Tôi gọi nó là,

có thể là một ví dụ đơn giản là đủ,

cảm ơn thời gian của bạn.

Answer 1

Dưới đây là một ví dụ đầy đủ về những gì một Navigator cảnh performant có thể trông giống như:

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

này đã được chiết xuất thành a library để làm cho nó thậm chí còn dễ dàng hơn :

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

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

Answer 2

Hãy xem https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

Ở đó bạn có thể tìm thấy một ví dụ về làm thế nào để thực hiện giữ chỗ để có được hiệu ứng chuyển tiếp nhanh hơn!

Answer 3

Bạn nên chuyển bất kỳ mã nào đang giữ luồng JS bận đến Trình quản lý tương tác, ví dụ:

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

Answer 4

import {InteractionManager} from "react-native"; 

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

tham khảo: https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions