将ReactNative项目整合到android项目中步骤

将ReactNative项目整合到android项目中步骤

学习React-Native已经有一段时间了,以前学习都是新建react-native项目,没有和android项目有什么关联。今天研究了一天,终于大致摸清了将ReactNative项目整合到现有android项目中的方法,其中踩到非常多的坑,都是在网上找资料才解决的,所以现在就记录下来,方便以后再看。组要实现两点功能:1、将React-Native以页面的形式加载到android项目中,在原生页面中点击按钮跳转到react-native页面;2、将React-Native以控件的形式加载在android项目中,在原生页面中,一半为原生控件,一半为react-native控件。

  • 1、使用npm init命令创建package.json文件
  • 2、使用npm –save react react-native下载源文件
  • 3、下载.flowconfig文件
  • 4、配置Android项目react-native依赖库
  • 5、配置React-Native本地代码路径
  • 6、修改package.json文件
  • 7、创建原生安卓类,作为加载react-native容器
  • 8、修改AndroidManifest.xml配置文件
  • 9、运行react-native start,启动服务器
  • 10、错误解决
  • 参考资料: [1. 如何把React Native嵌入到原生android应用中 ]、[2.React Native 集成到已有项目]

1、使用npm init命令创建package.json文件

在你的android项目中的根目录下,shift+鼠标左键,选择在此处打开命令窗口,即可进入到cmd,输入npm init命令(前提是需要安装node.js)会要你输入一些项目的相关信息,这里只要写项目名称即可,其他的东西随你自己,在写完之后输入yes即可。配置好的package.json文件如下图。
这里写图片描述

2、使用npm –save react react-native下载源文件

运行此命令就可以下载react以及react-native到项目根目录下了,下载完成后会在Android项目的根目录下生成一个node_modules文件夹。如果原来有react-native项目,可以直接从原项目中直接拷贝放到根目录下。
这里写图片描述

3、下载.flowconfig文件

flowconfig是给flow用的,flow的作用前面已经讲过了,主要用来做静态代码检查。我们可以输入如下命令在生成.flowconfig文件.这里提供下载该文件链接 https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig,下载完成后将文件名称改成.flowconfig放在Android项目根目录下即可。

4、配置Android项目react-native依赖库

因为我们将react集成到已有项目,而android项目是靠gradle来进行构建编译的,因此这里我们需要对应修改相应的内容。在app中的build.gradle中dependencies 添加compile “com.facebook.react:react-native:+” ,+号表示跟随系统最新版本,也可以写上具体的安装的版本,这里我自己是知道安装的版本号是0.39.2这个版本,截图如下:
这里写图片描述图片中有三处标红了的,这是因为集成完成后会出现一些问题,需要在此文件下做这些修改。其中ndk {abiFilters “armeabi-v7a”, “x86”}这句是缺少SO错误添加,这一句
configurations.all {
resolutionStrategy.force ‘com.google.code.findbugs:jsr305:1.3.9’
}是在编译整个项目时编译出错。最下面的红框就是添加react-native依赖库了。

5、配置React-Native本地代码路径

本步骤是制定Android-studio编译react-native时用制定路径下的代码,大致这个意思。这里添加是在根目录下的build.gradle中修改,放在在allprojects节点下。截图如下:
这里写图片描述修改后重新编译项目,会发现在external libraries下有react-native这个文件夹,后面带着版本号,如果版本号是0.2.XXX的话,说明此次添加失败。截图如下:
这里写图片描述

6、修改package.json文件

修改package.json文件见第一张图的截图,最终的信息就如图所示。这里不在多说。

7、创建原生安卓类,作为加载react-native容器

在你android原生项目下重新新建一个类,我这里新建类名为MyReactActivity,作为加载React-Native控件。


import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;


public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {

    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.myreactdemo);
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        //reactdemo这个名字要与package.json、以及react-native中index.android.js中的项目名要一致,否则会出错。
        mReactRootView.startReactApplication(mReactInstanceManager, "reactdemo", null);
        setContentView(mReactRootView);

    }
    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @Override
    protected void onResume() {
        super.onResume();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    protected void onPause() {
        super.onPause();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(MyReactActivity.this);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy(MyReactActivity.this);
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}
//react-native项目中的代码如下:index.android.js文件直接放在Android项目根目录下就行。
import React,{Component} 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}>这是React-Native组件</Text>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor:'#ccc',
  },
  hello: {
    fontSize: 20,
    color: '#fff',
    textAlign: 'center',
    margin: 10,
  },
});
//注意这里的reactdemo哦
AppRegistry.registerComponent('reactdemo', () => HelloWorld);
8、修改AndroidManifest.xml配置文件

这里需要添加一些访问网络的权限、添加类注册等。这里就直接看截图吧,注意,用红色框圈住的就是必须添加的权限,少一项都会有你意想不到的结局,整理这个我可是花了一天的时间才弄明白,中间的辛酸只有自己知道啊。
这里写图片描述
到这一步集成就已经完成,不过后面肯定会有错误出现的,暂且不管,一步一步来,遇到问题在去百度,总是可以解决的,就看自己是否有耐心了。

9、运行react-native start,启动服务器

进入到Android项目根目录,打开cmd,切换到该路径下,然后运行react-native start.
最后看到如下界面说明你这一步又成功了,你离成功就越来越近了。
这里写图片描述

10、运行项目

直接在android-studio中运行项目即可,如果顺利的话应该会出现自己想要的结果。
这里就直接看结果吧:
还是先看看项目的完整文件结构:
这里写图片描述
以下是运行结果:
这里写图片描述这里写图片描述

11、错误解决

关于运行出结果之前是遇到了很多的错误,这里主要是参考了两篇博客,里面会有解决错误方法,这里就不在写了,这两篇博客的链接在文章的最上边已经贴出来了,这里也就不在重复了。好了,这就写完了。希望有react-native的人一起学习,一起进步。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值