ReactNative學習小結

第一章 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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章