react-native混合原生開發

前提：已安裝配置好Java SDK，搭建好Androidstudio開發環境，安裝配置好Node.js

 Java SDK: 1.8.0_31
AndroidStudio: 3.4
Node: v8.12.0
react-native-cli: 2.0.1
react-native: 0.50.4

1、建立AndroidStudio項目

 

2、集成ReactNative

項目左邊視圖窗口選擇Project，點擊左下角的Terminal終端按鈕：

在終端窗口中執行：

npm init

生成package.json文件

 

package name: (rnappdemo) 輸入項目名稱，所有小寫：myrnapp

version: (1.0.0) 輸入版本號，能夠直接回車，也能夠輸入本身想要的初始版本號

description 輸入項目描述，隨便輸入：reactnativeapp

entry point: (index.js)輸入reactnative的入口文件：index.android.js

test command: 輸入：no

git repository: 輸入：no

keywords: 輸入：no

author: 輸入做者信息

license: (ISC) 輸入許可 默認ISC

以上因此完成以後，最後輸入yes確認 Is this ok? (yes) yes

 

在終端窗口執行:

npm install --save react react-native

安裝React 和React Native，出現這個文件夾就表明成功安裝了。

這裏能夠看到react和react-native的版本

在終端輸入如下命令，生成.flowconfig文件。

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

執行成功後，會在根目錄出現這個文件。

----------------------------------------------------------------------------------------------------------------------------------------------------------------

若是提示curl不是命令或可執行文件。能夠本身安裝，網上有教程。　　　　　　　　　　　　　　　　　　　　　　　　　　　 |

不過能夠選擇另外一種方式，在項目根目錄新建 .flowconfig，而後打開網址，將網頁的內容複製到.flowconfig文件中　　　　　　　|

 https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig  　　　　　　　　　　　　　　　　　　　　　　|

這是在curl命令不成功以後才用的，成功的不須要這一步驟　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　|

這是在curl命令不成功以後才用的，成功的不須要這一步驟　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　|

這是在curl命令不成功以後才用的，成功的不須要這一步驟　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　|

----------------------------------------------------------------------------------------------------------------------------------------------------------------

3、配置reactnative相關內容

添加

"start": "node node_modules/react-native/local-cli/cli.js start"

到package.json 文件中的script標籤裏

 

在項目根目錄建立index.android.js

 

將如下代碼複製到index.android.js中

'use strict'; import React from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class HelloWorld extends React.Component { render() { return ( <View style={styles.container}>
         <Text style={styles.hello}>第一個混合RNAPP</Text>
       </View>
 ) } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, hello: { fontSize: 20, textAlign: 'center', margin: 10, }, }); AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

4、項目app模塊build.gradle配置

在android->defaultConfig最後添加NDK支持：

ndk { abiFilters "armeabi-v7a", "x86" }

 

 

在android裏面添加以下兩個配置：

packagingOptions { exclude "lib/arm64-v8a/librealm-jni.so" } configurations.all { resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9' }

 

在dependencies裏面添加reactnative依賴：

implementation 'com.facebook.react:react-native:+'

完成後點擊右上角的Sync now同步

可能會報這個警告，不用擔憂，忽略

5、項目build.gradle配置

在allprojects->respositories中添加如下內容，加載最新的react-native庫，而後點擊右上角的Sync now同步

maven { // All of React Native (JS, Android binaries) is installed from npm url "$rootDir/node_modules/react-native/android" }

在gradle.properties文件最後添加：

android.useDeprecatedNdk=true

而後點擊右上角Sync now同步

6、配置app模塊AndroidManifest.xml文件

<!--添加網絡權限：-->
    <uses-permission android:name="android.permission.INTERNET" />
    <!--添加彈窗權限：-->
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>



    <!--在application裏添加reactnative彈窗內置頁面activity，不然搖晃手機並打開開發者菜單後，點擊Dev Setting，會直接Crash：-->
　　<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>

7、手動生成bundle文件

在app/src/main下新建assets目錄，在終端窗口Terminal中執行：

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

 

運行成功後，會在assets文件下面出現

index.android.bundle

文件。

8、添加Native Code

新建MyReactActivity，內容：

import android.support.annotation.Nullable; import com.facebook.react.ReactActivity; public class MyReactActivity extends ReactActivity { @Nullable @Override protected String getMainComponentName() { return "HelloWorld"; } }

新建MainApplication，內容：

import android.app.Application; import com.facebook.react.ReactApplication; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.react.shell.MainReactPackage; import com.facebook.soloader.SoLoader; import java.util.Arrays; import java.util.List; public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage() ); } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } @Override public void onCreate() { super.onCreate(); SoLoader.init(this,false); } }

修改AndroidManifest.xml起始activity：

在application中添加android:name=".MainApplication"；

將MainActivity改成MyReactActivity

9、運行

以上因此配置完成後，再配置好模擬器或直接連接手機

在終端Terminal窗口中執行：

adb reverse tcp:8081 tcp:8081

在終端窗口下執行：

npm start

啓動react服務，

而後綠色三角點擊運行，

能夠搖一搖手機，

在出現的彈窗點擊"DevSettings->debugging"，設置Debug server host &port for device爲：127.0.0.1:8081，而後從新運行，搖一搖，點擊Reload，此時顯示的就是"第一個混合 RNAPP"了