现有Android项目引入ReactNative--九步大法

为什么写这篇文章，因为很多时候我们是需要在原Android工程中添加ReactNative，而不是直接react-native init hello来创建工程，而且官网的说明不是很详细，不是完全针对安卓的，所以本文的必要性不言而喻。
#创建Android原生工程
新建Android原生工程，这里就不详细叙述了，如下图：
现有Android项目引入ReactNative--九步大法_第1张图片

现有Android项目引入ReactNative--九步大法_第2张图片

点击***finish***到这里Android原生工程创建完成。

运行一下看下效果：

现有Android项目引入ReactNative--九步大法_第3张图片

#动态添加ReactNative
###第一步：初始化package.json文件：
在工程根目录下的CMD中输入npm init，然后会生成package.json文件
现有Android项目引入ReactNative--九步大法_第4张图片

⚠️：这里name不能使用大写，如上动图所示，填写完相应的信息后会在根目录中生成相应的package.json文件，里面内容如下：

{  "name": "reactnativeapp",  "version": "1.0.0",  "description": "demo",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "libin",  "license": "ISC"}

###第二步：在package.json文件中添加启动脚本：

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

现有Android项目引入ReactNative--九步大法_第5张图片

###第三步：添加react和react-native 模块：
在根目录执行如下代码：

npm install --save react react-native

效果如图：

现有Android项目引入ReactNative--九步大法_第6张图片

执行完成后会出现下图的node_modules

现有Android项目引入ReactNative--九步大法_第7张图片

查看项目中有node_modules，说明react和react native 安装完成,如果没有说明安装失败，需要重新安装

###第四步：添加index.android.js文件到项目中：

import React from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';class HelloWorldApp extends React.Component {  render() {    return (              Hello world! I am from ReactNattive!!          )  }}var styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',  },  hello: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },});AppRegistry.registerComponent('ReactNativeApp', () => HelloWorldApp);

现有Android项目引入ReactNative--九步大法_第8张图片

⚠️：AppRegistry.registerComponent(‘ReactNativeApp’, () => ReactNativeApp);
里面的名称必须和你的工程名一致，对这个文件不熟悉的童鞋可以看本人之前的代码或者官网：

react-native官网

下图是官网相关介绍：

现有Android项目引入ReactNative--九步大法_第9张图片

###第五步：添加ReactNative相关依赖：

1.在app的build.gradle文件中添加react-native依赖库

compile "com.facebook.react:react-native:+"

现有Android项目引入ReactNative--九步大法_第10张图片

2.在project的build.gradle文件中添加react-native路径

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

⚠️：这里注意不要使用maven中的，因为我们使用的是我们本地的node_modules

现有Android项目引入ReactNative--九步大法_第11张图片

###第六步：添加相关权限：
在AndroidManifest.xml中添加如下代码：

###第七步：添加reactnative组件：
添加com.facebook.react.ReactRootView 组件布局代码如下

<?xml version="1.0" encoding="utf-8"?>

java代码如下：

public class MainActivity extends AppCompatActivity {    ReactRootView react_root_view ;    ReactInstanceManager mReactInstanceManager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        react_root_view = (ReactRootView) findViewById(R.id.react_root_view);        mReactInstanceManager =ReactInstanceManager.builder()                .setApplication(getApplication())                .setBundleAssetName("index.android.bundle")                .setJSMainModuleName("index.android")                .addPackage(new MainReactPackage())                .setUseDeveloperSupport(BuildConfig.DEBUG)                .setInitialLifecycleState(LifecycleState.RESUMED)                .build();        //ReactNativeApp 是项目名，需要和index.adnroid.js中的保持一致        react_root_view.startReactApplication(mReactInstanceManager, "ReactNativeApp", null);    }}

###第八步：添加DevSettingsActivity配置

将DevSettingsActivity配置加入到AndroidManifest.xml文件中

现有Android项目引入ReactNative--九步大法_第12张图片

###第九步：实现ReactApplication
我们需要自定义Application然后去实现ReactApplication接口中的方法。

public class MyApplication extends Application implements ReactApplication {    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {        @Override        public boolean getUseDeveloperSupport() {            return BuildConfig.DEBUG;        }        @Override        protected List getPackages() {            return Arrays.asList(                    new MainReactPackage()            );        }    };    @Override    public ReactNativeHost getReactNativeHost() {        return mReactNativeHost;    }    @Override    public void onCreate() {        super.onCreate();    }}

到此，我们已经大功告成，下面来看下效果。

#效果展示
现有Android项目引入ReactNative--九步大法_第13张图片

扫码关注公众号“伟大程序猿的诞生“，更多干货新鲜文章等着你～
现有Android项目引入ReactNative--九步大法_第14张图片
公众号回复“资料获取”，获取更多干货哦～

有问题添加本人微信号“fenghuokeji996” 或扫描博客导航栏本人二维码

更多相关文章

随机推荐