【REACT NATIVE 系列教程之七】統一ANDROID與IOS兩個平台的程式入口&&區分平台的元件簡介

     本篇介紹兩個細節：

      1. 關于如何将index.android.js 與index.ios.js統一管理起來。

      2.  Platform 元件的簡單介紹與使用 

 一：将index.android.js 與index.ios.js統一管理起來。

由于React本身就是跨平台的，但是建立的React項目總會有各自不同的程式入口檔案，如下圖展示目錄結構：

<a href="http://www.himigame.com/wp-content/uploads/2016/05/ataa.jpg" target="_blank"></a>

辨別1：這裡是兩個平台的項目檔案夾，這裡一般就是針對各平台不同配置、嵌入第三方插件等專屬平台相關設定與添加的地方。

辨別2:  React 在不同平台調用的不同入口檔案。

那麼正常情況下，我們隻要不涉及到某個平台獨有的特性代碼、元件或插件等，我們就完全沒有必要走兩個不同的入口。否則在Android上運作可能index.ios下運作的代碼段還要拷貝到index.android裡，反之亦然。

是以我們可以建立一個元件class 讓倆平台共同顯示這個class，就可以避免這種來回拷貝浪費的時間。

1. 假設我們建立了一個叫Main.js的元件Class

2. 然後index.ios.js如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<code>import React, {</code>

<code>  </code><code>AppRegistry,</code>

<code>  </code><code>Component,</code>

<code>  </code><code>View,</code>

<code>} from </code><code>'react-native'</code><code>;</code>

<code> </code> 

<code>import Main from </code><code>'./Main'</code><code>;</code>

<code>class AwesomeProject extends Component {</code>

<code>    </code><code>render() {</code>

<code>   </code><code>return</code> <code>(&lt;Main/&gt;);</code>

<code>   </code><code>}</code>

<code>}</code>

<code>AppRegistry.registerComponent(</code><code>'AwesomeProject'</code><code>, () =&gt; AwesomeProject);</code>

3.index.android.js如下：

<code>  </code><code>render() {</code>

<code> </code><code>return</code> <code>(&lt;Main/&gt;);</code>

<code> </code><code>}</code>

這樣統一顯示Main元件的内容，以後不論在android還是ios平台都可以完美相容，小細節，估計大家一看就懂。

        二. Platform 元件的簡單介紹與使用 

有時候我們會區分平台做一些處理，比如充值、适配問題、接入第三方SDK或與原生平台元件進行互動等等。

這時我們就需要 RN提供的 Platform 元件～ 使用很簡單，就不多贅述了。

示例：

代碼段1：（導入Platform元件）

<code>import React, { </code>

<code>  </code><code>...</code>

<code>  </code><code>Platform,</code>

代碼段2:

16

17

18

19

20

21

22

23

24

<code>testAlert(){</code>

<code>    </code><code>if</code><code>(Platform.OS === </code><code>'ios'</code><code>){</code>

<code>      </code><code>Alert.alert(</code><code>'測試目前平台'</code><code>, </code><code>'iOS平台'</code><code>);</code>

<code>    </code><code>}</code><code>else</code> <code>if</code><code>(Platform.OS === </code><code>'android'</code><code>){</code>

<code>      </code><code>Alert.alert(</code><code>'測試目前平台'</code><code>, </code><code>'Android平台'</code><code>);</code>

<code>    </code><code>}</code>

<code>  </code><code>}</code>

<code>    </code><code>return</code> <code>(</code>

<code>   </code><code>&lt;View style={styles.himiViewStyle} &gt;</code>

<code>   </code><code>&lt;Text style={styles.himiTextStyle}&gt;Himi React Native 教程&lt;/Text&gt;</code>

<code>        </code><code>&lt;View style={styles.himiViewStyle}&gt;</code>

<code>          </code><code>&lt;TouchableHighlight</code>

<code>            </code><code>underlayColor=</code><code>'#f00'</code>

<code>            </code><code>onPress={</code><code>this</code><code>.testAlert.bind(</code><code>this</code><code>)}</code>

<code>            </code><code>&gt;</code>

<code>            </code><code>&lt;Text style={{fontSize:20}}&gt;點選檢視目前平台&lt;/Text&gt;</code>

<code>          </code><code>&lt;/TouchableHighlight&gt;</code>

<code>        </code><code>&lt;/View&gt;</code>

<code>      </code><code>&lt;/View&gt;</code>

<code>    </code><code>)</code>

主要看 testAlert 的函數中的内容，通過Platform.OS擷取目前平台類型與android/ios做比較即可得知。

運作效果如下(點選檢視動态圖):

<a href="http://www.himigame.com/wp-content/uploads/2016/05/user27.gif" target="_blank"></a>

本文轉自 xiaominghimi 51CTO部落格，原文連結：http://blog.51cto.com/xiaominghimi/1783130，如需轉載請自行聯系原作者