RN性能优化之Navigator卡顿优化

前言

目前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
            });
        });
    }

参考

http://reactnative.cn/docs/0.22/performance.html#content