native-echarts(Echarts圖表集成)

1.集成方法

npm install native-echarts –save

2.注意

(1)在集成圖表功能后,可能會(huì)遇到安卓或者iOS打包后圖表顯示空白的情況，具體解決方法是修改<mark>node_modules/native-echarts/src/components/Echarts/index.js</mark>中的WebView組件：

<WebView originWhitelist={['']} ref="chart" 
   scrollEnabled = {false}    
   injectedJavaScript = {renderChart(this.props)}    
   style={{height: this.props.height || 400,        
   backgroundColor: this.props.backgroundColor || 
   'transparent'}} scalesPageToFit={Platform.OS === 'android' ? true : false}
   source={Platform.OS==='ios' ? require('./tpl.html'):{uri:'file:///android_asset/tpl.html'}} 
   onMessage={event => this.props.onPress ?
   this.props.onPress(JSON.parse(event.nativeEvent.data)) 
   : null}/>

(2)當(dāng)圖表數(shù)據(jù)沒有更改，但是進(jìn)行setState操作時(shí)，圖表會(huì)重新繪制，解決方法如下：

componentWillReceiveProps(nextProps) {
        if(nextProps.option !== this.props.option) { 
            this.refs.chart.injectJavaScript(renderChart(nextProps))        
        }
    }    

react-native-orientation(橫豎屏切換)

1.集成方法

npm install react-native-orientation –save
react-native link react-native-orientation

2.注意

iOS需要在工程中開啟權(quán)限

avatar

安卓端使用并未有任何問題，但是在iOS中，會(huì)出現(xiàn)用戶將手機(jī)橫豎切換時(shí)，界面會(huì)進(jìn)行橫豎屏切換的問題，需要寫原生方法來配合使用，原生方法如下:
在AppDelegate.m中加入下列方法，監(jiān)控手機(jī)橫豎屏狀態(tài)（這里監(jiān)控的是橫豎屏切換之前）

 - (UIInterfaceOrientationMask)application:(UIApplication *)application 
    supportedInterfaceOrientationsForWindow:(UIWindow *)window{
        if (_allowRotate == 1) {
            return UIInterfaceOrientationMaskLandscape;
        }
        else {
                return (UIInterfaceOrientationMaskPortrait);
        }
    }
 - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation{
    return YES;
 }
 - (BOOL)shouldAutorotate{
    return YES;
 }

在AppDelegate.h中添加屬性allowRotate

@property (nonatomic,assign)NSInteger allowRotate;

添加RN與原生的交互類PushCustom，在RCT_EXPORT_METHOD方法中更改allowRotate的屬性，從而鎖定手機(jī)橫豎屏，這樣就不會(huì)出現(xiàn)用戶將手機(jī)橫豎切換時(shí)的問題了。