原生Android项目中集成react-native以及jpush-react-native（极光推送）

来源：互联网发布：p2p理财跑路汇总数据编辑：程序博客网时间：2024/06/05 08:43

写这篇博文的目的

1、官方原生Android集成react native,根据官方文档配置后的总结与填坑（新版的配置手法上还是有些不同）。
2、官方jpush-react-native github文档写的配置过程在新版的react native中并不完整，使用最新的react native 0.41.2在配置极光时是需要做一些额外的操作（可以去看官方给的example）。
3、这篇文章中全程都是手动配置，是为了更好的理解整个配置流程。
4、我是边配边写的，最终配置成功，所以配置过程应该是一步都没漏。
5、把自己在配置过程中遇到的错误记录了下来（有些错误没记录下来的可以在评论给出），并给出解决方案。

集成环境：

Mac Sierra 10.12.1
Android Studio 2.2.3
Android Device（SDk：4.12.0）
Mac下Android的React Native开发环境配置
在极光推送注册App

需要用到的node_modules

react-native：^0.41.2
react: ^15.4.2
jpush-react-native: ^1.5.0
jcore-react-native: ^1.0.0

需要的知识

我只在Mac下Android的React Native开发环境配置接触过Android相关的开发知识，小白一个。
React Native的基本开发知识。

第一步：使用Android Studio新建一个原生Android项目并集成React Native

1、点击File->New->Project或者开始界面的New Project来新建一个项目：

Paste_Image.png

2、添加react native资源：
打开终端进入项目根目录运行：

npm init

该命令会在根目录下创建一个package.json文件，在创建过程中因为我的项目名有大写，所以在终端必须要填写小写的name：

Paste_Image.png

此时在项目根目录下就能看到package.json文件了：

Paste_Image.png

在package.json文件中的scripts下添加：

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

继续在终端输入以下命令：

npm install --save react react-native

加载完后会看到node-model包也在根目录下了：

Paste_Image.png

3、添加原生项目对react native的依赖：
按下图1，2，3的顺序依次修改配置：

Paste_Image.png

在1中，为 React Native 添加一个 maven 依赖的入口，必须写在 "allprojects" 代码块中:

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

此时它长这样：

Paste_Image.png

注意：url "$rootDir/node_modules/react-native/android"一定不能导错路径，当前我们的路径是$rootDir/node_modules而不是$rootDir/../node_modules。

在2中，添加 React Native 依赖:

 dependencies {     ...     compile "com.facebook.react:react-native:+" // From node_modules. }

此时它长这样：

Paste_Image.png

在3中，声明网络权限:

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

添加访问的DevSettingsActivity 界面：

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

此时，它长这样：

Paste_Image.png

现在，我们高高兴兴的sync吧！

如果遇到以下错误：

Error:Execution failed for task ':app:processDebugManifest'.> Manifest merger failed : uses-sdk:minSdkVersion 15 cannot be smaller than version 16 declared in library [com.facebook.react:react-native:0.41.2] /Users/hfmoney/Documents/RN/Demo/RNJpushAndroidPro/app/build/intermediates/exploded-aar/com.facebook.react/react-native/0.41.2/AndroidManifest.xml      Suggestion: use tools:overrideLibrary="com.facebook.react" to force usage

将2中的minSdkVersion改为16即可，改完后再次sync。
如果遇到以下错误：

Warning:Conflict with dependency 'com.google.code.findbugs:jsr305'. Resolved versions for app (3.0.0) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.

在2中添加：

android {  ...  configurations.all {        resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0'    }}

改完后再次sync。

4：使用Android原生调用React Native
1、创建类MainApplication.java，继承Application，实现ReactApplication：

Paste_Image.png

实现如下：

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);    }}

请自行导包
2、修改MainActivity.java，继承自ReactActivity，实现如下：

public class MainActivity extends ReactActivity {    @Override    protected String getMainComponentName() {        return "HelloWorld";    }}

MainActivity返回了在RN中注册的组件名：HelloWorld。
3、在项目根目录下创建index.android.js，并写入：

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}>Hello, World</Text>      </View>    )  }}var styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',  },  hello: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },});AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

4、修改app/src/main/AndroidMainfest.xml文件：
改变启动入口：

<application  android:name="./MainApplication"  ...>...</application>

添加RN飘红的权限：

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

此时它长这样：

Paste_Image.png

5、骚年跑起来吧！
sync->运行
如若遇到以下错误：

java.lang.RuntimeException: com.facebook.react.devsupport.JSException: Could not get BatchedBridge, make sure your bundle is packaged correctly

直接崩了

阅读全文

0 0

p2p理财跑路汇总数据

原创粉丝点击