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

這是來自HireArt的Tom Tang分享他們第一次使用React Native開發iOS移動應用。

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

1.一次學習，到處編寫， 跨設備平臺通常都不好，通常為了滿足一些低級通用標準導致最后結果是次優的，而React Native使用非死book同樣的React.js框架，但是為Android和iOS編寫不同的項目，卻可以使用同樣的一套代碼。

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

3.移動flexbox，React Native使用flexbox機會支持所有瀏覽器

，使得制作布局更加直覺化。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

當然，除了這些優點化，他們對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()

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

 <Icon name='trophy' />
<EvilIcon name='check' />

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 });

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',
  },
})

Component.js：

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

標準的風格如下：

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。

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