前言
目前RN的导航有Navigator和NavigatorIOS两种。
主要的区别在于NavigatorIOS使用了iOS中的UINavigationController类，是原生的，而Navigator则完全用js重写了一个类似功能的React组件，是js的。因此Navigator的性能不是很好，但可以兼容iOS和Android，而NavigatorIOS的性能比Navigator好很多，但只能用于iOS。
需要两个平台都能用，而且统一，只能用Navigator，同时我们就也要解决它带来的卡顿的问题。
解决方法
- 使用InteractionManager在转场动画的过程中，使新页面只渲染必要的少量的内容。
- 使用InteractionManager.runAfterInteractions，在回调函数里再写复杂的逻辑、请求（InteractionManager.runAfterInteractions的参数中包含一个回调，这个回调会在navigator切换动画结束的时候被触发，每个来自于Animated接口的动画都会通知InteractionManager）。
具体的代码片段如下：
constructor(props){
super(props);
this.state = {
didMount: false
};
}
render(){
const rowData = this.props.rowData;
return(
<View style={[styles.container, {backgroundColor: this.props.pageBackgroundColor}]}>
<View style={styles.contentContainer} {...this._panResponder.panHandlers}>
{this.state.didMount ?
<WebView
ref={(ref)=>{this.webView = ref}}
style={[styles.webView, {backgroundColor: this.props.pageBackgroundColor}]}
source={{uri: rowData.url}}
renderLoading={this._renderLoading.bind(this)}
renderError={this._renderError.bind(this)}
startInLoadingState={true}
/>
:
null
}
</View>
</View>
)
}
componentDidMount(){
InteractionManager.runAfterInteractions(() => {
this.setState({
didMount: true
});
});
}
