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的更多相关文章

  1. Android 工程集成React Native 0.44 注意点

    当前(2017年5月22日 )React Native开发相当火爆,但是搜索下来,没有最新版本0.44集成的教程,因此尝试了一下如何集成到Android原生工程中去.本篇旨在记录出现的问题以及应对方式 ...

  2. 《React Native 精解与实战》书籍连载「Android 平台与 React Native 混合开发」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  3. 【React Native】在原生和React Native间通信(RN调用原生)

    一.从React Native中调用原生方法(原生模块) 原生模块是JS中也可以使用的Objective-C类.一般来说这样的每一个模块的实例都是在每一次通过JS bridge通信时创建的.他们可以导 ...

  4. Kotlin & Android & Swift & Flutter & React Native

    Kotlin & Android https://www.runoob.com/kotlin/kotlin-tutorial.html Swift 5 & iOS 12 https:/ ...

  5. iOS原生 和 react native视图混编

    在iOS原生功能中加入RN,请看之前 写的 RN与iOS交互系列文章.本篇只讲下视图混编. 关键点只有二: 1.通过 RCTRootView 加载RN视图. 2.RN中,只需要AppRegistry. ...

  6. 如何利用Android Studio打包React Native APK

    ok!百度出来的东西很杂,所以,这里介绍一种最简单,最合适我们(新手,应该是吧)的APK的打包方式! 当然!这种打包是基于Android Studio的,所以,注意喽!!!! 废话不多说开始吧! 首先 ...

  7. Android Studio打开React Native创建的项目

    1.点击 Import project 2.找到项目下android文件夹,选择build.gradle文件,open

  8. 【React Native开发】React Native移植原生Android项目(4)

    ),React Native技术交流4群(458982758),请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...

  9. React Native For Android 架构初探

    版权声明:本文由王少鸣原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/171 来源:腾云阁 https://www.qclo ...

随机推荐

  1. A potentially dangerous Request.Form value was detected from the client问题处理

    问题剖析: 用户在页面上提交表单到服务器时,服务器会检测到一些潜在的输入风险,例如使用富文本编辑器控件(RichTextBox.FreeTextBox.CuteEditor等)编辑的内容中包含有HTM ...

  2. Eleven

    A. Eleven time limit per test : 1 second memory limit per test:  256 megabytes input:  standard inpu ...

  3. Matlab中数据的存储方式

    简介 MATLAB提供了丰富的算法以及一个易于操作的语言,给算法研发工作者提供了很多便利.然而MATLAB在执行某些任务的时候,执行效率偏低,测试较大任务量时可能会引起较长时间的等待.未解决这个问题, ...

  4. python复杂网络库networkx:算法

    http://blog.csdn.net/pipisorry/article/details/54020333 Networks算法Algorithms 最短路径Shortest Paths shor ...

  5. 安卓高级5 传感器和震动 模仿微信摇一摇Ui效果

    效果图: 所用的Ui就三张图: 案例代码: 结构 MainActivity.java package com.example.myapp; import android.content.Intent; ...

  6. Android Studio突然不显示logcat日志

    参考文章:http://blog.csdn.net/victor_e_n_01185/article/details/52818809 有时候,AS出现没有log的情况.一般您换了模拟器,或者使用真机 ...

  7. 1、win10下连接本地系统上的Linux操作系统(分别以Nat方式和桥接模式实现)

    1.win10下连接本地系统上的Linux操作系统(分别以Nat方式和桥接模式实现) 一.准备知识:win10下打开Administrator的方式 在win10操作系统中,Administrator ...

  8. [ExtJS5学习笔记]第三十五节 sencha extjs 5 组件查询方法总结

    一个UI前台组件肯定会比较多,我们通常习惯性的使用ID来获取需要操作的组件,但是这种方法是extjs推荐的么?有没有extjs推荐使用的获取组件的方法呢? 目录 目录 extjs的查询组件的API 查 ...

  9. [Matlab]技巧笔记

    1.将字符串作为Matlab命令执行 md = 'dir'; eval(md); 2.将字符串作为系统命令执行 md = 'dir'; system(md); 3.使显示图像的坐标轴使用相同的度量单位 ...

  10. 剑指offer-面试题7:俩个栈实现队列(java)

    详细分析请参照C语言版,这里仅仅给出实现代码,注释很详细,不得不说java各种api用起来真是爽飞了 1 package com.xsf.SordForOffer; 2 3 import java.u ...