由于逻辑复杂,我必须在this.props.navigator.push(),慢导航器转换使应用程序不可用时渲染许多组件.
然后我注意到here提供了InteractionManager.runAfterInteractions api来解决这个问题,
我需要在导航器动画完成后将大部分消耗很长时间的组件带回来,但我不知道我应该在哪里调用它,
也许一个简单的例子就足够了,
谢谢你的时间.
解决方法
以下是高性能
Navigator场景的完整示例：
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/>
);
}
}
import {AfterInteractions} from 'react-native-interactions';
function MyScene() {
return (
<AfterInteractions placeholder={<CheapPlaceholder/>}>
<ExpensiveComponent/>
</AfterInteractions>
);
}
