ReactNative前端開發者

ReactNative前端開發者

文檔版本0.0.2

Author: Necfol

說明: 本文檔用於指導前端React Native的開發，如需開發其餘其餘框架應用，不適用本文檔

前期準備

1. ReactNative 的基本概念ReactNative文檔
2. es6 開發基本知識 es6 基本文檔
3. Node 環境(Node >=5.0.0，Yarn)下載地址
4. Android Studio環境Android Studio
5. Xcode 環境（Mac適用）

一、搭建腳手架

1.一、安裝腳手架工具

經過 npm 安裝 React Native 腳手架命令行工具

npm install -g yarn react-native-cli 

1.二、初始化腳手架

因爲官方RN0.45版本有問題，推薦使用0.44.3穩定版本

$ react-native init ${your_project} --template micrn --version 0.44.3 

若是須要特定版本則：

$ react-native init ${your_project} --template micrn --version ${version}

若是須要最新版本則：

$ react-native init ${your_project} --template micrn --version

例如: react-native init test --template micrn --version 0.44.3

命令會在當前的文件夾下生成一個文件夾，這個文件夾就是咱們的項目文件夾

二、 運行項目

1.進入上一步建立的文件夾，運行命令(初次運行此項目時須要輸入)

node script/addDev.js 

命令運行後，會去下載相關的dev依賴，而且替換包名稱。這是因爲React Native官方提供的構建模板生成工具不支持devDependencies，因此自定義devDependencies.json文件，項目生成以後，經過腳本把devDependencies.json中的依賴依次安裝而且添加到package.json中；官方提供的構建模板生成工具也不支持自動在template構建的項目中替換應用名稱，這個腳本也達到了自動替換應用名稱的目的。
2.而後啓動項目

ios(Mac環境): react-native run-ios android: react-native run-android 

安卓在運行項目以前，須要先打開Android Studio運行安卓模擬器！！!即AVD Manager. 安卓第一次運行的時候，命令行下載依賴可能比較慢，能夠參考安裝，經過Android Studio進行快速安裝依賴。 項目啓動在ios模擬器，或者安卓模擬器上，而且會打開命令行運行構建服務， ⚠️ 不能把進程殺掉！ 能夠經過chrome 安裝調試工具，或者安裝react-native-debugger，再或者React Developer Tools。

三、項目基本結構

3.一、目錄說明

my-project
├── __tests__
├── android //安卓工程項目 ├── ios //ios工程項目 ├── script //腳本文件存放處 ├── src //項目源代碼，開發人員編寫的源代碼都在這個目錄下 │ └── action //redux中放置action的文件夾 │ │ └── home.js //home的action │ │ └── type //存放action type的文件夾 │ └── components //頁面級別的公用組件, 例如在某個項目裏共同使用的用戶信息展現, 某些共用的複雜彈窗等等 │ │ └── QRScan.js //二維碼/條形碼掃描 │ └── container //業務模塊文件夾, 按照業務邏輯區分的業務模塊文件夾 │ │ └── Home.js //首頁 │ └── reducer //redux中放置reducer的文件夾 │ │ └── index.js //combine全部reducer │ │ └── nav.js //navigation的reducer │ │ └── home.js //home頁面的reducer │ └── app.js //入口 │ └── routerConfig.js //路由 │ └── configStore.js //redux中間件添加，調試工具配置 │ └── root.js //navigation根頁面 ├── .buckconfig ├── .flowconfig ├── .gitattributes ├── .npmignore ├── jsconfig.json ├── app.json ├── .babelrc //babel配置 ├── .gitignore ├── README.md ├── index.android.js //android應用入口 ├── index.ios.js //ios應用入口 ├── package.json ├── yarn.lock 

3.二、目錄規範

1. container 目錄下有一個業務建一個子文件夾, 文件夾以駝峯命名, 其餘文件也以駝峯命名
2. components 目錄下也分別建子文件夾, 文件夾以駝峯命名,其餘文件也以駝峯命名

四、我要開發Template

若是咱們想要開發或者更新Template該怎麼辦？
1.經過Template構建測試項目，在這個項目中開發您的代碼
2.開發完以後，將測試項目全部的依賴正確添加到Template項目的dependencies.json和devDependencies.json中，若是須要增長測試頁面，請將相關文件也拷貝到Template項目中， ⚠️ 必定要確認無誤方可提交，而且發佈。
3.更新package.json中的版本號，提交代碼
4.命令行執行

npm publish 

5.enjoy it

五、組件使用提示

1. 掃一掃
   使用iOS 10或者更高版本時，須要在項目info.plist中增長相機使用權限，�該文件在'your_project/ios/your_project/Info.plist'，請增長如下代碼:

<key>NSCameraUsageDescription</key> <string>Your message to user when the camera is accessed for the first time</string> <!-- Include this only if you are planning to use the camera roll --> <key>NSPhotoLibraryUsageDescription</key> <string>Your message to user when the photo library is accessed for the first time</string> <!-- Include this only if you are planning to use the microphone for video recording --> <key>NSMicrophoneUsageDescription</key> <string>Your message to user when the microsphone is accessed for the first time</string> 

1. 圖片緩存

如下步驟在0.1.6及以上版本已經集成到addDev.js中，只須要在下載完跑腳本便可，可忽略

第一次使用圖片緩存時須要運行

RNFB_ANDROID_PERMISSIONS=true react-native link react-native-fetch-blob 

而且在項目android/app/src/AndroidManifest.xml中添加

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 

以後使用圖片緩存便可按照文檔來react-native-cached-image

⚠️ 若是ios加載圖片必須是https
⚠️ 對於安卓加載gif圖片，須要在項目的/android/app/build.gradle的dependencies中添加

dependencies { compile 'com.facebook.fresco:animated-base-support:0.14.1' compile 'com.facebook.fresco:animated-gif:0.14.1' } 

以後從新運行 react-native run-android