现有Android项目引入ReactNative--九步大法
为什么写这篇文章,因为很多时候我们是需要在原Android工程中添加ReactNative,而不是直接react-native init hello
来创建工程,而且官网的说明不是很详细,不是完全针对安卓的,所以本文的必要性不言而喻。
#创建Android原生工程
新建Android原生工程,这里就不详细叙述了,如下图:
点击***finish***到这里Android原生工程创建完成。
运行一下看下效果:
#动态添加ReactNative
###第一步:初始化package.json文件:
在工程根目录下的CMD中输入npm init
,然后会生成package.json文件
⚠️:这里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"
###第三步:添加react和react-native 模块:
在根目录执行如下代码:
npm install --save react react-native
效果如图:
执行完成后会出现下图的node_modules
查看项目中有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);
⚠️:AppRegistry.registerComponent(‘ReactNativeApp’, () => ReactNativeApp);
里面的名称 必须和你的工程名一致,对这个文件不熟悉的童鞋可以看本人之前的代码或者官网:
react-native官网
下图是官网相关介绍:
###第五步:添加ReactNative相关依赖:
1.在app的build.gradle文件中添加react-native依赖库
compile "com.facebook.react:react-native:+"
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
###第六步:添加相关权限:
在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文件中
###第九步:实现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(); }}
到此,我们已经大功告成,下面来看下效果。
#效果展示
扫码关注公众号“伟大程序猿的诞生“,更多干货新鲜文章等着你~
公众号回复“资料获取”,获取更多干货哦~
有问题添加本人微信号“fenghuokeji996” 或扫描博客导航栏本人二维码
更多相关文章
- Android中的控件
- Android(安卓)ADB常用命令以及环境配置
- Android创建sdcard
- 编译android 之后生成的 img 文件介绍
- android 菜单例子
- Android(安卓)Uri获取资源文件(多种方式)
- Android应用程序打包签名、加固、二次打包(图形/命令行)
- Android权限系统
- NPM 和webpack 的基础使用