使用React Native開發第一個iOS應用

banq發表於2016-02-27
React NativeiOS
這是來自HireArt的Tom Tang分享他們第一次使用React Native開發iOS移動應用。

他們的背景是Web開發人員，不是專門的iOS開發人員，雖然，他們也知道Swift或Objective C如何的棒，但是更習慣於使用Ruby和Javascrip，他們的團隊開始於2015早期使用Facebook的React，他們認為React Native有如下競爭優勢：

1.一次學習，到處編寫， 跨裝置平臺通常都不好，通常為了滿足一些低階通用標準導致最後結果是次優的，而React Native使用Facebook同樣的React.js框架，但是為Android和iOS編寫不同的專案，卻可以使用同樣的一套程式碼。

使用React Native開發第一個iOS應用

2.宣告式檢視，當他們在Web中使用React時，就非常喜歡React的宣告式檢視，同樣在開發iOS時使用宣告式檢視意味著更容易可預測的程式碼和更少的bug。

3.移動flexbox，React Native使用flexbox機會支援所有瀏覽器
，使得製作佈局更加直覺化。https://css-tricks.com/snippets/css/a-guide-to-flexbox/

使用React Native開發第一個iOS應用


當然，除了這些優點化，他們對React Native最初還是有保留意見的：
1. React Native生態圈的限制，初期，基於React Native的各種iOS元件比較少，他們只能自己建立某個SDK(AWS 和Mixpanel).的React Native Bridge。

2.由於React Native升級更快，導致之前的一些程式碼被遺棄，因此只有在需要新版本新功能才決定升級。

3.網路無法搜尋到錯誤，遭遇一些錯誤總是前人沒有遇到過的，網路上很難查詢。

他們還介紹一些元件包：
1.react-native-simple-store，開始時是使用AsyncStorage，但是發現構建相同的儲存和獲取功能變得很冗長乏味，太煩人，而這個 Simple Store是基於AsyncStorage 之上構建，能夠簡單直接訪問裝置：

Store.get('user').then((user)=> {
  // some code
}).catch((error) => {
  console.warn(error)
}).done()
<p class="indent">


2.react-native-vector-icons，這是最好的向量圖示工具包，與FontAwesome 和 EvilIcons可以完美地配合使用，MaterialIcons, IonIcons等能透過該包實現：

<Icon name='trophy' />
<EvilIcon name='check' />
<p class="indent">


3.tcomb-form-native，表單建立使用這個包變得非常容易，你能夠定義定製的表單inout類似 鍵盤或自動糾正等的。

var Person = t.struct({
  name: t.String,              // a required string
  surname: t.maybe(t.String),  // an optional string
  age: t.Number,               // a required number
  rememberMe: t.Boolean        // a boolean
});
<p class="indent">


4.react-native-router-flux，這個包將路由URL變得容易，定義你自己的路由規則，只需要一行程式碼就可以放入檢視：
Actions.dashboard()

最後，Tom Tang也指出使用過程的不可思議奇怪之處，比如，不支援Styling內聯，比如有下面CSS Style:

module.exports = StyleSheet.create({
  title: {
    fontSize: 23,
    textAlign: 'center',
    color: blueText,
    fontFamily: 'Avenir',
    fontWeight: '700',
  },
  header: {
    padding: 20,
    paddingTop: 30,
    backgroundColor: 'fff',
    borderBottomWidth: 1,
    borderBottomColor: 'ccc',
  },
})
<p class="indent">


Component.js：

...
<Text style={[Styles.header, {color: 'white'}]}>
  Some text
</Text>
...
<p class="indent">


標準的風格如下：
style={Styles.header}

而定製內聯風格如下：
style={{color: 'white'}}

他們融合了兩種方式的程式碼：
style={[Styles.header, {color: 'white'}]}

這相當黑了RN，但是不知道有其他什麼辦法？

另外一個問題是迴圈Requires/Navigation：這是使用NavigatorIOS時突然發生的，這是在開發某個頁面來自哪上一個頁面，下面將到哪下一個頁面，在iOS中，檢視是儲存在堆疊中，試圖獲得一個之前儲存在堆疊的元件將導致錯誤，放入當前元件也會導致一個迴圈require錯誤並中斷，使用react-native-router-flux 能夠解決這個問題，並能以更加合理更擴充套件性的方式編寫路由。

總之，使用React Native開發iOS是一種非常棒的新的開發途徑，能夠幫助開發團隊更快地從Web開發遷移到移動開發。最後他們還在部落格中釋出以下幾個元件開發心得：

1. 登入與許可權
2.API和回撥
3.使用 RNBridge訪問iOS SDK。

Developing our first iOS App with React Native | C

[該貼被banq於2016-02-27 14:26修改過]

相關文章