本站文章均爲 李華明Himi 原創,轉載務必在明顯處註明:
轉載自【黑米GameDev街區】 原文鏈接: http://www.himigame.com/react-native/2260.html
本篇介紹兩個細節:
1. 關於如何將index.android.js 與index.ios.js統一管理起來。
2. Platform 組件的簡單介紹與使用
一:將index.android.js 與index.ios.js統一管理起來。
由於React本身就是跨平臺的,但是創建的React項目總會有各自不同的程序入口文件,如下圖展示目錄結構:
標識1:這裏是兩個平臺的項目文件夾,這裏一般就是針對各平臺不同配置、嵌入第三方插件等專屬平臺相關設置與添加的地方。
標識2: React 在不同平臺調用的不同入口文件。
那麼正常情況下,我們只要不涉及到某個平臺獨有的特性代碼、組件或插件等,我們就完全沒有必要走兩個不同的入口。否則在Android上運行可能index.ios下運行的代碼段還要拷貝到index.android裏,反之亦然。
因此我們可以新建一個組件class 讓倆平臺共同顯示這個class,就可以避免這種來回拷貝浪費的時間。
1. 假設我們新建了一個叫Main.js的組件Class
2. 然後index.ios.js如下:
import React, { AppRegistry, Component, View, } from 'react-native'; import Main from './Main'; class AwesomeProject extends Component { render() { return (<Main/>); } } AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
3.index.android.js如下:
import React, { AppRegistry, Component, View, } from 'react-native'; import Main from './Main'; class AwesomeProject extends Component { render() { return (<Main/>); } } AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
這樣統一顯示Main組件的內容,以後不論在android還是ios平臺都可以完美兼容,小細節,估計大家一看就懂。
二. Platform 組件的簡單介紹與使用
有時候我們會區分平臺做一些處理,比如充值、適配問題、接入第三方SDK或與原生平臺組件進行交互等等。
這時我們就需要 RN提供的 Platform 組件~ 使用很簡單,就不多贅述了。
示例:
代碼段1:(導入Platform組件)
import React, { ... Platform, ... }
代碼段2:
testAlert(){ if(Platform.OS === 'ios'){ Alert.alert('測試當前平臺', 'iOS平臺'); }else if(Platform.OS === 'android'){ Alert.alert('測試當前平臺', 'Android平臺'); } } render() { return ( <View style={styles.himiViewStyle} > <Text style={styles.himiTextStyle}>Himi React Native 教程</Text> <View style={styles.himiViewStyle}> <TouchableHighlight underlayColor='#f00' onPress={this.testAlert.bind(this)} > <Text style={{fontSize:20}}>點擊查看當前平臺</Text> </TouchableHighlight> </View> </View> ) }
主要看 testAlert 的函數中的內容,通過Platform.OS獲取當前平臺類型與android/ios做比較即可得知。
運行效果如下(點擊查看動態圖):