react-native混合原生開發

本文轉載自查看原文 2019-05-03 21:38 1087

前提：已安裝配置好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

一、創建AndroidStudio項目

二、集成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命令不成功之后才用的，成功的不需要這一步驟　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　|

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

三、配置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);

四、項目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同步

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

五、項目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同步

六、配置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"/>

七、手動生成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

文件。

八、添加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);
    }

}