Android原生嵌入React Native
来源:互联网 发布:中国网络作协 编辑:程序博客网 时间:2024/06/08 13:13
1.首先集成的项目目录
我使用的是直接按照react-native init Project 的格式来导入的,也就是说,我的Android项目目录是跟node_modules是在一个目录下的。
我们init完项目之后,项目初始化完成了,这时候我们可以用命令react-native run-android直接运行项目,至于怎么调试,之前已经说过。
说一下我们怎么开发和运行分开吧,我们开发一般会选择webstrom,开发后我们会Android和ios的编译分开。
启动npm
下面说一下android 嵌入RN环境吧。
编写Android原生代码,用来调用RN
package com.reactdemo;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.KeyEvent;import com.facebook.react.LifecycleState;import com.facebook.react.ReactInstanceManager;import com.facebook.react.ReactRootView;import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;import com.facebook.react.shell.MainReactPackage;public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler { private ReactInstanceManager mReactInstanceManager; private ReactRootView mReactRootView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); 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(); mReactRootView.startReactApplication(mReactInstanceManager, "ReactDemo", null); setContentView(mReactRootView); } @Override public boolean onKeyUp(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) { mReactInstanceManager.showDevOptionsDialog(); return true; } return super.onKeyUp(keyCode, event); } @Override public void onBackPressed() { if (mReactInstanceManager != null) { mReactInstanceManager.onBackPressed(); } else { super.onBackPressed(); } } @Override public void invokeDefaultOnBackPressed() { super.onBackPressed(); } @Override protected void onPause() { super.onPause(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostPause(); } } @Override protected void onResume() { super.onResume(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostResume(this, this); } }}
注意要加上网络等一些权限。创建package.json,添加react native包
使用命令npm init,跟着步骤走就好了,给大家截个图:
最后你就可以在你的RN项目里面看到一个package.json。
运行Demo
注:可能会出现java.lang.RuntimeException: Could not get BatchedBridge, make sure your bundle is packaged correctly这个错误,
react-native bundle —platform android —dev false —entry-file index.android.js —bundle-output ReactDemo/app/src/main/assets/index.android.bundle —sourcemap-outpu ReactDemo/app/src/main/assets/index.android.map —assets-dest ReactDemo/app/src/main/res/
- Android原生嵌入React Native
- React Native嵌入Android原生项目中
- 在Android原生中嵌入React Native,进而React Native调用原生
- 在Android原生中嵌入React Native,进而React Native调用原生
- 如何把React Native嵌入到原生android应用中
- react native 嵌入原生Android应用中的问题
- 【React Native】嵌入原生app之踩坑Android篇
- React-Native学习之嵌入Android原生项目
- react native 学习笔记----将react native嵌入到Android原生应用
- React Native嵌入到现有原生应用
- React Native 嵌入到iOS原生应用
- React Native 嵌入到iOS原生项目
- React Native嵌入原生应用的坑
- React Native 嵌入到原生应用
- 安卓原生app嵌入React-Native
- react-native + as <react-native嵌入原生应用开发>
- React Native移植原生Android
- Android Native嵌入React Native模块
- 【HDU 5884】Sort(哈夫曼+优先队列)
- 使用axis1.X根据WSDL地址生成客户端调用代码
- 深入 char * ,char ** ,char a[ ] ,char *a[]
- 1到n里面素数的个数n<=1e11
- webview容器属性
- Android原生嵌入React Native
- tortoisegit免密码远程提交
- Android 提取图片背景方法(纯色)
- Elasticsearch(9)实践五-更为复杂的查询
- 设置弹出的动画
- 启动apk的常用方法(包括只知道包名的启动方法)
- 八大排序
- 剑指Offer---面试题6:重建二叉树
- Easyui-tree 加载json数据及loadFilter的使用