ReactNative对接Android步骤

最新推荐文章于 2024-08-10 07:51:46 发布

Hi以梦为马

最新推荐文章于 2024-08-10 07:51:46 发布

阅读量1.1k

点赞数

分类专栏： android 文章标签： android react native

本文链接：https://blog.csdn.net/lhy349/article/details/105701718

版权

android 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

1.开发环境搭建

1.1 安装依赖

必须安装的依赖有：Node、Python2、JDK 和 Android Studio。

虽然你可以使用任何编辑器来开发应用（编写 js 代码），但必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。

Node, Python2, JDK

建议直接使用搜索引擎搜索下载 Node 、Python2 和Java SE Development Kit (JDK)

注意 Node 的版本应大于等于 12，Python 的版本必须为 2.x（不支持 3.x），而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）。安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程（或使用科学上网工具）。

注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！

# 使用nrm工具切换淘宝源
npx nrm use taobao

# 如果之后需要切换回官方源可使用
npx nrm use npm

1.2 Yarn（推荐）

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

Android 开发环境

Android 开发环境的搭建主要涉及到android Studio的搭建，JDK的搭建，此处不再做安装说明，详情可网络查找相关教程。

注：通过android Studio下载相关的镜像文件时，需要注意：确保下载了 React Native 所必须的28.0.3版本。

2.Android项目集成ReactNative

2.1 新建Android项目

打开android Studio新建一个android项目

2.2 在项目根目录引入RN模块

在android Studio中的Terminal中输入npm init ,输入一些项目的描述属性(默认一路回车也行),生成的json文件内容大致如下：

{
  "name": "messageservice",
  "version": "1.0.0",
  "description": "",
  "main": "index.android.js",
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-native": "^0.61.5"
  }
}

2.3 引入RN文件

在android Studio中的Terminal中输入npm install --save react react-native

npm install --save react react-native

会在根目录生成一个node_modules文件夹，存的是RN的一些模块文件，如果在这个过程中出现require react@x.x.xx, but none was installed ,那么就使用命令
npm i -S react@x.x.xx//此处为提示的版本号.

2.4 引入.flowconfig文件

方法一：.flowconfig文件可以从facebook的github上复制，然后在工程的根目录创建.flowconfig文件，将其内容复制进去即可。
方法二：在Terminal中执行以下命令：

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

2.5 修改 package.json文件

在项目的根目录下打开 package.json文件，在scripts模块下添加如下内容，添加后效果如上文所示。

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

2.6 引入RN类库

在项目根目录下的build.gradle添加以下配置

allprojects {
    repositories {
        jcenter()
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/node_modules/jsc-android/dist")
        }
        maven {
            url "https://maven.google.com"
        }
    }
}

在app下的build.gradle -> dependencies 添加以下依赖：

implementation "com.facebook.react:react-native:+"
implementation 'org.webkit:android-jsc:+'

在app下的build.gradle -> android 添加以下依赖：

   defaultConfig {
        //...其他配置
        ndk{ abiFilters "armeabi-v7a","x86"}
    }

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

完整版build.gradle文件如下：

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    buildToolsVersion "28.0.3"
    useLibrary 'org.apache.http.legacy'
    defaultConfig {
        applicationId "com.testrn.messageservice"
        minSdkVersion 21
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        ndk{ abiFilters "armeabi-v7a","x86"}
    }
    packagingOptions {
        exclude "lib/arm64-v8a/librealm-jni.so"
    }
    buildTypes {
        release {
            buildConfigField("String", "releaseTime", "\"" + new Date().format("yyyy/MM/dd") + "\"")
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
        debug {
            buildConfigField("String", "releaseTime", "\"" + new Date().format("yyyy/MM/dd") + "\"")
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }

    configurations.all {
        //for Error:Conflict with dependency 'com.google.code.findbugs:jsr305'
        resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.2.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
    implementation 'com.android.support:multidex:1.0.1'
    implementation 'com.alibaba:fastjson:1.1.67.android'
    implementation "com.facebook.react:react-native:+"
    implementation 'org.webkit:android-jsc:+'
}

在 AndroidManifest.xml 清单文件中声明网络权限:

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

如果需要访问 DevSettingsActivity 界面（开发者菜单），则还需要在 `AndroidManifest.xml` 中声明:

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

3.编写RN代码，运行项目

3.1 创建JS 文件

在android项目根目录下创建 index.android.js 文件，文件内容如下：

'use strict';
import React, { Component } from 'react';
import {
     AppRegistry,
     StyleSheet,
     Text,
     NativeModules,
     View,
     ToastAndroid,
     DeviceEventEmitter,
     Linking,
     AppState
} from 'react-native';
let title = 'React Native界面';

class reactNative extends Component {
    /**加载完成*/
    componentWillMount() {
      let result = NativeModules.MyNativeModule.Constant;
    //  let result = 1001;
      console.log('原生端返回的常量值为：' + result);

      //1. 页面路由的方式获取参数
//      this.native2RnMsg();
      AppState.addEventListener('change',(appState)=>{
                if(appState=='active'){
                    //2. 通信的方式获取参数
                    this.rnCallNativeInitFromCallback();

                    Linking.getInitialURL().then(url=>{
                        console.warn('stateChange url: ' + url);
                    })
                }
              });
    }

    /**
    * 原生调用RN
    */
    componentDidMount() {
       DeviceEventEmitter.addListener('nativeCallRn',(msg)=>{
            title = "React Native界面,收到数据：" + msg;
            ToastAndroid.show("发送成功", ToastAndroid.SHORT);
       })
    }

    /**
    * 页面路由的方式获取参数
    */
    native2RnMsg() {
        Linking.getInitialURL().then((url) => {
                  if (url) {
                    console.warn('捕捉的URL地址为: ' + url);
                  }else{
                    console.warn('捕获得的url为空');
                  }
             }).catch(err => console.error('错误信息为:', err));
    }

    /**
    * 通信的方式获取参数
    */
    rnCallNativeInitFromCallback() {
        NativeModules.MyNativeModule.rnCallNativeInitFromCallback((result) => {
                    ToastAndroid.show("CallBack 初始化参数:" + result, ToastAndroid.SHORT);
               })
    }

    /**
    * 关闭当前界面
    */
    rnCallNativeCloseActivity() {
         NativeModules.MyNativeModule.rnCallNativeCloseActivity();
    }

   /**
   * RN调用Native且通过Callback回调 通信方式
   */
   callbackComm(msg) {
       NativeModules.MyNativeModule.rnCallNativeFromCallback(msg,(result) => {
            ToastAndroid.show("CallBack收到消息:" + result, ToastAndroid.SHORT);
       })
   }

   /**
   * RN调用Native且通过Promise回调 通信方式
   */
   promiseComm(msg) {
      NativeModules.MyNativeModule.rnCallNativeFromPromise(msg).then(
          (result) =>{
               ToastAndroid.show("Promise收到消息:" + result, ToastAndroid.SHORT)
          }
      ).catch((error) =>{console.log(error)});
   }

   /**
   * 调用原生代码
   */
   call_button(){
      NativeModules.MyNativeModule.rnCallNative('调用Android原生方法操作');
   }

   callNative(){
      NativeModules.MyNativeModule.startActivityRN('com.miaozhen.messageservice.MyRNActivity','test');
   }

render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} >
            {title}
        </Text>

        <Text style={styles.welcome}
            onPress={this.call_button.bind(this)}
            >
            React Native 调用原生方法操作!
        </Text>

        <Text style={styles.welcome}
            //给此处的文字绑定一个事件，其中callNative为要调用的方法名。
            onPress={this.callNative.bind(this)}>
            跳转MyRNActivity!
        </Text>

        <Text style={styles.welcome} onPress={this.callbackComm.bind(this,'callback发送啦')}>
            Callback通信方式
         </Text>
         <Text style={styles.welcome} onPress={this.promiseComm.bind(this,'promise发送啦')}>
            Promise通信方式
         </Text>

         <Text style={styles.welcome} onPress={this.rnCallNativeCloseActivity.bind(this)}>
            关闭当前界面
         </Text>
         <Text style={styles.welcome} onPress={this.rnCallNativeInitFromCallback.bind(this)}>
                     获取初始化值
                  </Text>

        <Text style={styles.welcome}>
          我是RN界面!
        </Text>
      </View>
);
 }

}
const styles = StyleSheet.create({
     container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
     },
     welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
     },
     instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
     },
});

AppRegistry.registerComponent('reactNative', () => reactNative);

3.2 在Terminal中执行启动命令

npm run start

执行命令后的界面如下所示


┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  Running Metro Bundler on port 8081.                                         │
│                                                                              │
│  Keep Metro running while developing on any JS projects. Feel free to        │
│  close this tab and run your own Metro instance if you prefer.               │
│                                                                              │
│  https://github.com/facebook/react-native                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in

3.3 启动新的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

执行命令后将本地的js文件打包成index.android.bundle文件，并且保存在项目的assets文件夹下

在浏览器中输入： http://localhost:8081/index.android.bundle ，访问没有错误，则启动成功。

注：每次JS文件后，必须执行改步骤，生成新的bundle文件

3.4 配置Application文件

public class UILApplication extends MultiDexApplication implements ReactApplication {
    private static UILApplication application;

    @Override
    public void onCreate() {
        super.onCreate();
        application = this;
        SoLoader.init(this, false);

        NetRequestManager.getInstance().init(application);
    }

    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(),
                    //将我们创建的包管理器给添加进来
                    new MyReactPackage()
            );
        }
    };

    public static UILApplication getInstance() {
        if (application == null) {
            application = new UILApplication();
        }
        return application;
    }

    /**
     * 获取上下文
     */
    public static Context getApplication() {
        return application;
    }

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

3.5 添加RN界面

public class MyRNActivity extends ReactActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //设置初始化相关参数
        Intent intent = getIntent();
        if (!TextUtils.isEmpty(intent.getStringExtra("params"))) {
            Log.e("eeee", intent.getStringExtra("params") + "");
        }
    }

    @Nullable
    @Override
    protected String getMainComponentName() {
        return "reactNative";//此处容器名要与index.android.js里面注册的控件名一致
    }

    @Override
    protected void onResume() {
        super.onResume();
    }

    @Override
    protected void onPause() {
        super.onPause();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }
}

4.RN和native交互传值

4.1 页面路由的方式

1.配置清单文件AndroidManifest.xml

在清单文件AndroidManifest.xml中的MyRNActivity配置如下信息：

<activity android:name=".MyRNActivity"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar">
    <intent-filter>
        <data
            android:host="apphost"
            android:scheme="appscheme" />
        <action android:name="android.intent.action.VIEW" />

        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
    </intent-filter>
 </activity>

2.跳转传递参数

在启动MyRNActivity的位置，添加相关参数

//1.普通方式加载RN界面
// Intent intent = new Intent(this, MyRNActivity.class);
// startActivity(intent);
//2.路由方式加载RN界面 传值
Intent intent1 = new Intent(Intent.ACTION_VIEW, Uri.parse("appscheme://apphost/path?params=xxx"));
startActivity(intent1);

3.js文件接收参数

通过上述方法，即可在JS文件的方法中接收到传递的信息，接收位置如下：

   /**
    * 页面路由的方式获取参数
    */
    native2RnMsg() {
        Linking.getInitialURL().then((url) => {
                  if (url) {
                    console.warn('捕捉的URL地址为: ' + url);
                  }else{
                    console.warn('捕获得的url为空');
                  }
             }).catch(err => console.error('错误信息为:', err));
    }

4.2 NativeModel通信方式获取

此方法后续做单独介绍

总结

至此，RN集成android项目基本就完成了，需要注意的地方是集成过程中会遇到一些问题，在此罗列一下，我所遇到的问题，以及相关解决方案：

启动react-native项目时报报错： Unable to load script.Make sure you’re either running a metro server（ run ‘react-native start’ ） or that your bundle ‘index.android.bundle’ is packaged correctly for release.

解决方案：启动报错
react-native不是内部或外部命令，也不是可运行的程序或批处理文件

解决方案：不是内部命令

参考文章：

React Native中文网

简述RN集成到Android原生项目