native-echarts(Echarts圖表集成)
1.集成方法
npm install native-echarts –save
2.注意
(1)在集成圖表功能后,可能會遇到安卓或者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操作時蝎困，圖表會重新繪制，解決方法如下：
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中，會出現(xiàn)用戶將手機(jī)橫豎切換時，界面會進(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ī)橫豎屏领斥，這樣就不會出現(xiàn)用戶將手機(jī)橫豎切換時的問題了月洛。
