现有Android项目引入ReactNative--九步大法
来源:互联网 发布:时间记录软件 编辑:程序博客网 时间:2024/05/22 10:25
转载自http://blog.csdn.net/github_33304260
创建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"}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
第二步:在package.json文件中添加启动脚本:
"start": "node node_modules/react-native/local-cli/cli.js start"
- 1
第三步:添加react和react-native 模块:
在根目录执行如下代码:
npm install --save react react-native
- 1
效果如图:
执行完成后会出现下图的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 ( <View style={styles.container}> <Text style={styles.hello}>Hello world! I am from ReactNattive!!</Text> </View> ) }}var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, hello: { fontSize: 20, textAlign: 'center', margin: 10, },});AppRegistry.registerComponent('ReactNativeApp', () => HelloWorldApp);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
⚠️:AppRegistry.registerComponent(‘ReactNativeApp’, () => ReactNativeApp);
里面的名称 必须和你的工程名一致,对这个文件不熟悉的童鞋可以看本人之前的代码或者官网:
react-native官网
下图是官网相关介绍:
第五步:添加ReactNative相关依赖:
1.在app的build.gradle文件中添加react-native依赖库
compile "com.facebook.react:react-native:+"
- 1
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"}
- 1
- 2
- 3
- 4
⚠️:这里注意不要使用maven中的,因为我们使用的是我们本地的node_modules
第六步:添加相关权限:
在AndroidManifest.xml中添加如下代码:
<uses-permission android:name="android.permission.INTERNET" />
- 1
第七步:添加reactnative组件:
添加com.facebook.react.ReactRootView
组件 布局代码如下
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center"> <TextView android:layout_marginBottom="50dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="native----->Hello World!" /> <com.facebook.react.ReactRootView android:id="@+id/react_root_view" android:layout_width="300dp" android:layout_height="300dp"/></LinearLayout>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
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); }}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
第八步:添加DevSettingsActivity配置
将DevSettingsActivity配置加入到AndroidManifest.xml文件中
- 1
第九步:实现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<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage() ); } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } @Override public void onCreate() { super.onCreate(); }}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
到此,我们已经大功告成,下面来看下效果。
效果展示
- 现有Android项目引入ReactNative--九步大法
- 现有Android项目引入ReactNative--九步大法
- 现有Android项目引入ReactNative--九步大法
- 现有Android项目引入ReactNative
- 在Windows上将ReactNative集成到现有的Android项目
- ReactNative 移植Android项目
- ReactNative手动嵌入现有iOS项目(第N篇)
- android原生项目整合ReactNative
- 第三方库 zlib库 引入到现有项目中
- Kotlin 引入Android项目
- cocoapods 把reactNative 集成到现有项目中Podfile文件内容
- django引入现有数据库
- django引入现有数据库
- Android 项目中嵌入 ReactNative 模块
- Android 项目中嵌入 ReactNative 模块
- ReactNative打包Android项目APK包
- ReactNative For Android 项目实战总结
- ReactNative重构之前的android项目
- 【Spring】AOP编程
- session详解
- 清除浮动
- idea在线生成激活码
- 盒子模型
- 现有Android项目引入ReactNative--九步大法
- scrollTop()和document.body.scrollTop的区别
- jquery的事件命名空间详解
- npm的简单使用
- Sublime Text 3 安装Package Control
- 给某个标签,添加事件(onclick、change等事件),有两种,1在html标签中直接加上事件 2在页面加载完成后,在ready函数中给标签添加事件,特别是对于自己封装的控件如box,一般都是用2
- Buffer
- Scrum模式:细颗粒度的协作,发散讨论的度
- nodeJs中系统模块的常用方法和自定义模块暴露