使用React Native開發第一個iOS應用
這是來自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編寫不同的專案,卻可以使用同樣的一套程式碼。
2.react-native-vector-icons,這是最好的向量圖示工具包,與FontAwesome 和 EvilIcons可以完美地配合使用,MaterialIcons, IonIcons等能透過該包實現:
3.tcomb-form-native,表單建立使用這個包變得非常容易,你能夠定義定製的表單inout類似 鍵盤或自動糾正等的。
4.react-native-router-flux,這個包將路由URL變得容易,定義你自己的路由規則,只需要一行程式碼就可以放入檢視:
Actions.dashboard()
最後,Tom Tang也指出使用過程的不可思議奇怪之處,比如,不支援Styling內聯,比如有下面CSS Style:
Component.js:
標準的風格如下:
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。
他們的背景是Web開發人員,不是專門的iOS開發人員,雖然,他們也知道Swift或Objective C如何的棒,但是更習慣於使用Ruby和Javascrip,他們的團隊開始於2015早期使用Facebook的React,他們認為React Native有如下競爭優勢:
1.一次學習,到處編寫, 跨裝置平臺通常都不好,通常為了滿足一些低階通用標準導致最後結果是次優的,而React Native使用Facebook同樣的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() <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修改過]
相關文章
- 優雅地使用TypeScript開發React Native應用TypeScriptReact Native
- React-Native iOS Module開發ReactiOS
- React Native釋出APP之打包iOS應用React NativeAPPiOS
- React Native iOS混合開發實戰教程React NativeiOS
- 輕鬆教你React Native 混合開發(iOS篇)React NativeiOS
- 使用duxapp開發 React Native App 事半功倍UXAPPReact Native
- 在Mac搭建react-native iOS開發環境MacReactiOS開發環境
- 在 Windows 上搭建 React Native IOS 開發環境WindowsReact NativeiOS開發環境
- 如何用 React Native 開發實時音視訊應用React Native
- 我的第一個React Native AppReact NativeAPP
- 開發一個React + Electron應用React
- Flutter與Native混合開發-FlutterBoost整合應用和開發實踐(iOS)FlutteriOS
- 使用React Native和Expo快速構建原生移動iOS和Android應用程式React NativeiOSAndroid
- 開發第一個Flink應用
- React Native+Redux開發實用教程React NativeRedux
- 《React Native跨平臺移動應用開發》讀後鬼扯React Native
- 使用 Socket.io 和 React 開發一個聊天應用React
- 《React Native高效開發》之create-react-native-appReact NativeAPP
- 從零開始生成一個ios react-native專案iOSReact
- React Native 開發規範React Native
- React Native 使用 react-native-webview 渲染 HTMLReact NativeWebViewHTML
- react-native開發避坑React
- React Native 開發環境搭建React Native開發環境
- React-native 開發小技巧React
- React Native開發之必備React基礎React Native
- 使用typescript開發react-native前期踩坑記錄TypeScriptReact
- [譯] 用 Flutter 開發你的第一個應用程式Flutter
- 第一章 第一個簡單的iOS應用iOS
- React Native學習指南:React Native嵌入到原生應用的一次嘗試React Native
- React Native基礎&入門教程:除錯React Native應用的一小步React Native除錯
- 使用SAP UI5 Web Components開發React應用UIWebReact
- React Native 藍芽4.0 BLE開發React Native藍芽
- 向React Native應用新增螢幕捕捉功能React Native
- 一個高顏值 React Native 視覺化開發工具React Native視覺化
- react native 包學不包會系列--react native開發基礎知識React Native
- 第一個spark應用開發詳解(java版)SparkJava
- FISCO BCOS | 開發第一個區塊鏈應用區塊鏈
- 動手開發第一個 Cypress 測試應用
- 探索 react-native run-ios(android)ReactiOSAndroid