React Native移植原生Android

(一)前言

之前已经写过了有关React Native移植原生Android项目的文章,不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题,对于初学者来讲还是会有很多疑难的困惑的,而且官方的文档移植没有更新,最新版本集成方法已经发生很大变化啦~OK,今天我们用新版本进行走一遍流程,具体原来就不讲了,直接看移植步骤。

(二)前提准备工作

①.首先我们有一个采用Gradle构建的Android应用项目,这个大家直接采用Android Studio进行创建一个项目即可。我这边新建一个目录TestInte,然后采用Android Studio创建一个android项目在该文件夹下面。具体如下:

②.电脑必须安装Node.js,具体安装使用方法(点击进入)

(三)Android项目相关配置

2.1 在我们Android项目的build.gradle中添加React Native依赖,然后同步,具体代码如下:

1

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

2.2紧接着我们需要在项目AndroidManifest.xml中加入网络访问权限

1

<uses -permission android:name="android.permission.INTERNET" />

该仅仅用于开发阶段从开发服务器加载最细的JavaScript代码,在正式发布版本中,如果有需要可以把该网络权限删掉。

(四)添加原生代码

在Android项目的MainActivity中,我们需要配置相关代码来进行启动运行React Native库。我这边直接采用>=0.18版本的写法了,

具体代码如下:

12345678910111213141516171819

public class MainActivity extends ReactActivity {     @Override    protected String getMainComponentName() {        return "testinte";    }     @Override    protected boolean getUseDeveloperSupport() {        return BuildConfig.DEBUG;    }     @Override    protected List<ReactPackage> getPackages() {        return Arrays.<ReactPackage>asList(                new MainReactPackage()        );    }}

到此为止我们的Android项目Activity和配置文件以及完成了最基本的配置方法了。

(五)添加js

下面我们采用命令行,首先切换到项目的根目录上面(我的例子是切换到TestIntegrating目录下)

5.1.命令行运行npm init 运行截图如下:

该命令会创建一个package.json文件,并且提示我们输入一些信息,默认不输入即可,不过name必须要为全英文小写哦,具体结果执行结果如下:

5.2.接下来我们在在scripts标签那边添加如下代码:

1

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

以及添加react依赖:"react": "15.0.2"和react-native依赖:"react-native": "^0.26.3",

[注意].不要问我为什么知道这样配置的,你init一个项目就知道了…根据本地最新的依赖版本信息复制进去就可以啦

5.3.然后在项目根目录下面执行npm install安装依赖模块,安装记录截图如下:

如果这样觉的嫌麻烦了,当然了还记得上面如果你重新init一个项目,直接把node_modules文件夹复制进行呗

5.4.curl -o .flowconfig  https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

做一下flow配置

5.5.到这里其实已经差不多了,不过我们看上面的build.gradle文件中的配置compile 'com.facebook.react:react-native:+' 如果直接这样的话,官方会去下载已经提交到0.20.1版本,所以我们这边还是需要做一些配置,让它可以加载我们node_modules文件夹中react-native本地最新版本库。具体修改文件路径:android/build.gradle

123456789

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

新增maven库地址到本地库即可

5.6.现在我们创建一下文件命名为:index.android.js,然后在里边添加如下代码:

123456789101112131415161718192021222324252627282930

'use strict'; import React from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native'; class MyAwesomeApp extends React.Component {  render() {    return (      <View >        <Text style={styles.hello}>Hello, World</Text>        <Text style={styles.hello}>恭喜你已经完成React Native移植Android项目</Text>        <Text style={styles.hello}>博客地址:www.lcode.org</Text>      </View>    )  }}var styles = StyleSheet.create({  hello: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },}); AppRegistry.registerComponent('testinte', () => MyAwesomeApp);

以上就完成了所有的相关代码以及react-native配置了,注意上上面的都采用testinte了,希望大家都用一样的名字和前面MainActivity进行统一哦。

(六)运行APP

上面的配置步骤全部完成了,下面我们要运行APP了,首先我们需要开启开发服务器,使用如下命令即可:npm start

运行结果如下:

接下来就是最后一步了,直接运行react-native run-android命令编译运行应用就可以了,运行结果如下:

这样就完成了一个简单的Android原生项目移植到React Native中了。

【注意事项】.感谢热心童鞋的回复,大家可能会遇到评论区中找不到.so文件的问题

具体解决方案:http://www.jianshu.com/p/67c574236e8f

解决方案方案:

找不到.so 库错误 解决办法是 在项目中的 build.gradle 文件中添加

123

ndk {abiFilters "armeabi-v7a", "x86"}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android常用基础

Tinker-使用教程与原理分析(上)

前面我们讲解了AndFix的使用,这篇我们来讲解下微信的Tinker热修复,相比AndFix,Tinker的功能更加全面,更主要的是他支持gradle。他不仅做...

18310
来自专栏

后端开源软件集合

缓存系统:memcached(group cache)、redis、mongodb、Couchbase(CouchDB、Membase、CouchOne) ht...

26990
来自专栏ionic3+

ng-zorro-mobile,踩坑记

ionic3和ionic4差别是比较大的,所以ionic3二次封装的组件基本是不能直接用在ionic4上。ng-zorro-mobile并不是依赖ionic的组...

1.2K30
来自专栏Android干货

Android项目实战(二十五):Android studio 混淆+打包+验证是否成功

36270
来自专栏沃趣科技

ASM 翻译系列第三十六弹:ACFS磁盘组的重平衡操作

原作者:Bane Radulovic 译者: 魏兴华 审核: 魏兴华 DBGeeK社区联合出品 原文链接:http://asmsupportguy....

377110
来自专栏wOw的Android小站

[Android] Service服务详解以及如何使service服务不被杀死

  服务是一个应用程序组件,可以在后台执行长时间运行的操作,不提供用户界面。一个应用程序组件可以启动一个服务,它将继续在后台运行,即使用户切换到另一个应用程序。...

1.6K10
来自专栏7号代码

Android开发高级进阶——Service与Notification

Service是处理一些后台任务,在主线程中,并不能执行耗时操作。而Thread是开启一个子线程,在子线程中执行耗时操作,这样不会阻塞主线程。

20040
来自专栏AILearning

Apache Zeppelin 中 JDBC通用 解释器

概述 JDBC解释器允许您无缝地创建到任何数据源的JDBC连接。 在运行每个语句后,将立即应用插入,更新和升级。 到目前为止,已经通过以下测试: ...

35570
来自专栏Android机动车

Android BLE 快速上手指南

本文旨在提供一个方便没接触过Android上低功耗蓝牙(Bluetooth Low Energy)的同学快速上手使用的简易教程,因此对其中的一些细节不做过分深入...

18920
来自专栏Seebug漏洞平台

使用 XML 内部实体绕过 Chrome 和 IE 的 XSS 过滤器

来源:BypassingXSSFiltersusingXMLInternalEntities 原作者:DavidLitchfield (david@davidl...

415100

扫码关注云+社区

领取腾讯云代金券