第一章 ReactNative
一. react-native簡介
React Native (簡稱RN)是Facebook於2015年4月開源的跨平臺移動應用開發框架,是Facebook早先開源的UI框架 React 在原生移動應用平臺的衍生產物,目前支持iOS和安卓兩大平臺。RN使用Javascript語言,類似於HTML的JSX,以及CSS來開發移動應用,因此熟悉Web前端開發的技術人員只需很少的學習就可以進入移動應用開發領域
二.react-native優勢
|
Native App |
Web App |
Hybrid App |
React Native App |
原生功能體驗 |
優秀 |
差 |
良好 |
接近優秀 |
渲染性能 |
非常快 |
慢 |
接近快 |
快 |
是否支持設備底層訪問 |
支持 |
不支持 |
支持 |
支持 |
網絡要求 |
支持離線 |
依賴網絡 |
支持離線(資源存本地情況) |
支持離線 |
更新複雜度 |
高(幾乎總是通過應用商店更新) |
低(服務器端直接更新) |
較低(可以進行資源包更新) |
較低(可以進行資源包更新) |
編程語言 |
Android(Java),iOS(OC/Swift) |
js+html+css3 |
js+html+css3 |
主要使用JS編寫,語法規則JSX |
社區資源 |
豐富(Android,iOS單獨學習) |
豐富(大量前端資源) |
有侷限(不同的Hybrid相互獨立) |
豐富(統一的活躍社區) |
上手難度 |
難(不同平臺需要單獨學習) |
簡單(寫一次,支持不同平臺訪問) |
簡單(寫一次,運行任何平臺) |
中等(學習一次,寫任何平臺) |
開發週期 |
長 |
短 |
較短 |
中等 |
開發成本 |
昂貴 |
便宜 |
較爲便宜 |
中等 |
跨平臺 |
不跨平臺 |
所有H5瀏覽器 |
Android,iOS,h5瀏覽器 |
Android,iOS |
APP發佈 |
App Store |
Web服務器 |
App Store |
App Store |
第二章 環境的搭建
React-native環境搭建(window10)已有androidstudio開發環境
1. 安裝Python最新版本(https://www.python.org/downloads/release/python-2710/)
2. 安裝note.js 最新版本(https://nodejs.org/en/)
3. 安裝react-native命令行工具(npminstall -g react-native-cli)
第三章 實例
新建react項目
1.進入你的工作目錄例如d:/workspace,輸入命令react-nativeinit projectname(需要數十分鐘或者更長)
2. 運行package,輸入命令react-nativestart(首次運行需要下載東西需要等一會或者更長)
3.運行項目,輸入命令react-nativerun-android,可以安裝模擬器BlueStacks,也可以安裝到真機上(運行到真機注:手機和電腦同一網絡環境下最好連同一個wifi;搖晃手機調用調試界面;android5.0以上的手機adb reverse tcp:8081 tcp:8081;5.0以下的系統在調試界面輸入你的電腦的ip和端口號10.0.0.1:8081;Reload Js重新加載頁面)
第四章 原有項目集成react-native
.React-native 集成到原有android項目中
a. 在項目的根目錄運行
# npm init(創建了一個空的node模塊(其實就是創建了一個package.json描述文件))
# npm install --save react react-native(則創建了node_modules目錄並把react和react-native下載到了其中)
# curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
第三行命令在window下不支持可以直接在瀏覽器輸入上面的url下載放到項目根目錄中
b. 下面我們打開新創建的package.json文件,然後在其scripts字段中加入:
c. 接下來在項目根目錄中創建index.android.js文件,然後將下面的代碼複製粘貼進來:
d. 在你的app中 build.gradle 文件中添加 React Native 依賴:
dependencies {
compile"com.facebook.react:react-native:+"// From node_modules.和package.json中保持一直
}
e. 在項目的 build.gradle文件中爲 React Native添加一個 maven 依賴的入口,必須寫在 "allprojects"代碼塊中:
allprojects { repositories { jcenter() maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm url "$rootDir/node_modules/react-native/android" } } }
f.接着,在 AndroidManifest.xml清單文件中聲明網絡權限:
<uses-permission android:
name=
"android.permission.INTERNET"/>
如果需要訪問 DevSettingsActivity
界面,也需要在 AndroidManifest.xml
中聲明:
<activity android:
name=
"com.facebook.react.devsupport.DevSettingsActivity"/>
g. 想要通過原生代碼調用 React Native ,就像這樣,我們需要在一個 Activity中創建一個 ReactRootView對象,將它關聯一個 React application並設爲界面的主視圖。具體代碼如下圖所示:
o. 運行項目
在項目根目錄輸入npm start;然後點擊android studio運行。
第五章 實現打電話功能
. React-native調用android本地方法(目標爲調用打電話的功能)
1. 我們首先來創建一個原生模塊。一個原生模塊是一個繼承了ReactContextBaseJavaModule
的Java類如下附件:
ReactContextBaseJavaModule要求派生類實現getName方法。這個函數用於返回一個字符串名字,這個名字在JavaScript端標記這個模塊。這裏我們把這個模塊叫做MyNativeModule,這樣就可以在JavaScript中通過React.NativeModules. MyNativeModule訪問到這個模塊.
2.要導出一個方法給JavaScript使用,Java方法需要使用註解@ReactMethod
。方法的返回類型必須爲void
。
React Nativ的跨語言訪問是異步進行的.
3.在Java這邊要做的最後一件事就是註冊這個模塊。我們需要在應用的Package類的createNativeModules方法中添加這個模塊。如果模塊沒有被註冊,它也無法在JavaScript中被訪問到。如下附件:
4. 這個package需要在MainApplication.java文件的getPackages方法中提供。這個文件位於你的react-native應用文件夾的android目錄中。具體路徑是: android/app/src/main/java/com/your-app-name/MainApplication.java.如下附件:
5.在js中調用,在index.android.js中引入NativeModules,按照如下圖調用:
第六章 參考資料
一.參考文檔
http://reactnative.cn/docs/0.42/getting-started.html
二.調用打電話源碼連接
鏈接:http://pan.baidu.com/s/1geRm5jX 密碼:a76b