本篇文章主要包括两方面,如何从0开始把RN(react-native)项目整合进入现有Android项目,以及我们做的第一个RN的上线项目遇到的一些坑。

初次做RN项目,我们选择做了一个逻辑相对简单的转转app内部的帮助中心项目。整个项目有4个页面用的RN,其他页面走的是native提供的统跳协议,跳转到对应的native页面或者是H5页面。

整合RN到android项目中

react-native cli提供的init指令,可以帮助我们创建一个RN的工程,但是很多场景下RN都是移植进入原生android或者iOS中。例如应该如何实现,在Android页面,点击一个按钮进入RN页面呢?

下面是具体的实现过程。

1、新建一个Android项目

注意Minimum SDK选择API23以上,一路next后finish。

2、添加JS

打开studio的Terminal窗口,输入如下命令:

npm init
会让你输入一些初始化package.json 的配置信息,例如:

按照提示输入就行了。
这一步完成之后,在项目的根目录下就会生成package.json这个文件,下一步输入:

npm install react@16.0.0-alpha.6 - -save
npm install react-native@^0.44.0 - -save

注意,一定优先安装react哦

大约一两分钟的样子(如果卡到这里了,看看安装时是不是忘了配置镜像),完成之后你的根目录下会多了一个node_modules的文件夹,里面存放了下载好的React 和React Native。这里有童鞋可能会质疑为什么不把react和react-native的依赖直接写入package.json中,然后直接npm install,如果这么做的化,npm run start启动的时候会报如下的错误:

接下来把如下命令粘贴到package.json 文件下 scripts 标签中

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

下一步,在根目录下创建index.android.js文件并把如下代码粘贴到其中:

代码很简单,居中显示一个HelloWorld。

3、项目配置(Android)

用android studio打开工程,修改android根目录下Gradle Scripts的build.gradle(Module:app)文件添加如下内容,注意下面appcompat-v7版本为25.2.0,而且我把dependencies中test相关的依赖移除掉了,避免不必要的bug。

在build.gradle(Project:***)中添加依赖

继续下一步,在AndroidManifest.xml中添加网络访问权限

4、创建Activity

以下几步不要安装官网的去做,官网的步骤太麻烦,而且很久没有更新了。

1.新建一个Activity,让其继承ReactActivity,并重写getMainComponentName(),返回我们在index.android.js中注册的HelloWorld这个组件。

别忘了把这个activity加入app/manifests/AndroidManifest.xml文件中

2.自定义一个Application,继承ReactApplication ,编写以下代码:

记得在AndroidManifest.xml中引用

android:name=”.App”

3.在目录res/layout中增加activity_main.xml文件,内容如下:

在MainActivity中通过按钮启动我们的ReactNativeActivity

4.app/src/main下新建assets文件夹

运行如下命令

react-native start

然后直接在android studio工程中,点击上方工具栏的“run”按钮,应该就可以了。
如果卡在了这一步:

没关系,用资源管理器打开你工程的根目录,在此目录下重新运行一个命令行并在其中输入如下命令

react-native bundle - -platform android - -dev false - -entry-file index.android.js - -bundle-output app/src/main/assets/index.android.bundle - -assets-dest app/src/main/res/

完成之后assets目录下会生成以下两个文件

确认一下react native service处于运行状态,然后正常运行你的APP,点击start,如果出现

恭喜你!你已经成功入坑,但是,实际项目中并不是这么简单!


项目实战踩坑

 

1.技术栈

es6 + redux + react-redux + redux-thunk + react-navigation

2.项目心得

这个项目踩坑最多的地方还是在react-navigation的使用上:

1、同一页面参数不同,多次回退始终进入同一个页面:
比如详情页页面a/cateId/xy,当传入不同cateId参数“cd”跳转到同一详情页a/cateId/cd的时候,页面是正常改变的,但是回退的时候,第一次是回到a/cateId/cd,再次回退还是回到a/cateId/cd。不会触发页面render。
stackNavigator导航管理的页面,在切换的时候,不是按照堆栈的push,pop形式,而是通过移动指针到对应的页面,同时标记此页面为激活状态。

解决办法是通过componentWillReceiveProps,shouldComponentUpdate以及componentDidUpdate,当nextProps中的params.cateId和当前的params.cateId不同的时候,触发页面的render。

2、实现手势swipe向右滑动后退功能:
官方文档介绍,react-navigation在根组件的navigationOptions设置中添加gesturesEnabled: true,就可以实现滑动切换切换页面的需求,但是在真机上测试不生效。
通过读源码了解到,react-navigation内部是通过引入RN的PanResponder手势识别系统来实现滑动的机制,只有在onMoveShouldSetPanResponder返回true的时候,才能执行接下来的手势动作。具体执行方法如下:

因为上述代码中的 GESTURE_RESPONSE_DISTANCE_HORIZONTAL 过小,导致始终return false,把这个值从20改到60就可以了。

3、实现页面跳转动画效果

StackNavigator(RouteConfigs, StackNavigatorConfig);

在第二个参数StackNavigatorConfig的配置中,可以传入mode: ‘card’,这个参数会在native端获取默认的滑动效果,iOS端默认的是左右切换的效果,但是android端默认的是上下切换效果。为了实现统一的过场效果。
幸好react-navigation提供了一个transitionConfig接口,可以实现定制化滑屏效果。不知道该如何定制么?没有关系,源码中已经在iOS端帮我们实现,稍微修改一下代码就可以了。

FlatList问题:

1.ListHeaderComponent,ListFooterComponent
当FlatList有并列的组件的时候,会出现,其他并列的组件位置是固定的(类似于css中的position fixed),页面只有FlatList区域是可以滚动的,为了实现这个页面整体是可以滚动的,需要把FlatList上面的组件加入FlatList的ListHeaderComponent属性中,同时把其下面的组件加入到ListFooterComponent中。

2.通过利用getItemLayout,把高度提前设定好,可以较少一次RN计算高度的render。

 

图片问题:

1.RN中的图片有两种来源:native内部图片,cdn的图片。
native内部图片,直接可以通过require图片名字取到,一定不要加.png等后缀。
例如:

当然我们可以通过在打包的时候把通过相对路径引入的内部图片,

例如:

通过配置–asset-dest打包进入native原生目录res中,这时候要注意,打出来的RN的bundle,只有放入android的assets文件夹下才能根据相对路径取到这些存放在res目录中的图片。

cdn的图片,只有指定图片的宽高才能够显示出来。

与native交互的处理

  1. NativeModules:native暴露出来的模块,可以通过NativeModules对象取到。

  2. 有些场景需要native直接传递某些参数到RN端,iOS可以通过调用initWithBundleURL,在initialProperties参数传参,android通过getLaunchOptions把参数写入返回的bundle中。在RN工程的根文件(例如app.js),通过this.props.key(key是属性名字)直接取到。

如果你喜欢我们的文章,关注我们的公众号和我们互动吧。

React-native初体验(安卓篇)的更多相关文章

  1. 手把手教你React Native 实战之开山篇《一》

    先说一下我为什么学习RN 18年3月29号,随着自己内心的欲望和冲动,任务交接了一下,正式离开一家医疗公司.第二天就入职了这之前已经找好的公司,由于自己对代码浓厚的热情,自己终于也不再带团队.正好有充 ...

  2. 安装android Studio和运行react native项目(基础篇)

    ANDROID_HOME环境变量 确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径. 打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设 ...

  3. 0、手把手教React Native实战之开山篇

    ##作者简介 东方耀    Android开发   RN技术   facebook   github     android ios  原生开发   react reactjs nodejs 前端   ...

  4. spring native 初体验实现 小米控制美的空调

    目前关于 spring native 分享的文章还比较少 写这篇文章的主要目前是分享一下自己写的一个 小米控制美的空调 的程序 集成 spring native 过程中碰到的一些问题和解决方法 先放地 ...

  5. (转)Delphi2009初体验 - 语言篇 - 智能指针(Smart Pointer)的实现

     转载:http://www.cnblogs.com/felixYeou/archive/2008/08/27/1277250.html 快速导航 一. 回顾历史二. 智能指针简介三. Delphi中 ...

  6. SDDC的Windows初体验-QT篇

    前言 如果熟悉爱智和看过我之前文章的朋友见到这篇文章一定会有很大疑问,SDDC 作为智能设备发现控制协议,怎么会用在 windows 上? 这一切还是源自于我巨大的脑洞,因为这段在搞 Windows ...

  7. vue-cli@3.x初体验之前篇-回顾vue-cli@2.x创建项目的流程

    模拟实际工作中的操作,假如新开启了一个vue项目,可以先看看上篇博文中的git操作,新建空仓库vue-demo,并拉取到本地,创建本地dev分支后 1. 全局安装vue-cli yarn global ...

  8. Hybrid App 和 React Native 开发那点事

    简介:Hybrid App(混合模式移动应用)开发是指介于Web-app.Native-App这两者之间的一种开发模式,兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开 ...

  9. 学习React Native必看的几个开源项目

    学习React native ,分享几个不错的开源项目,相信你学完之后,一定会有所收获.如果还没有了解RN的同学们可以参考手把手教你React Native 实战之开山篇<一> 1.Fac ...

  10. React Native 入门到原理(详解)

    抛砖引玉(帮你更好的去理解怎么产生的 能做什么) 砖一.动态配置 由于 AppStore 审核周期的限制,如何动态的更改 app 成为了永恒的话题.无论采用何种方式,我们的流程总是可以归结为以下三部曲 ...

随机推荐

  1. Nodejs-express 4.0框架 简单介绍

    http://www.expressjs.com.cn/4x/api.html  这个是express API的中文手册 但是只是翻译了一点 英语比较差比较难受. 1. 关于安装 现在网上查的时候有一 ...

  2. 隐马尔科夫模型HMM(二)前向后向算法评估观察序列概率

    隐马尔科夫模型HMM(一)HMM模型 隐马尔科夫模型HMM(二)前向后向算法评估观察序列概率 隐马尔科夫模型HMM(三)鲍姆-韦尔奇算法求解HMM参数(TODO) 隐马尔科夫模型HMM(四)维特比算法 ...

  3. 最短路径Floyd算法【图文详解】

    Floyd算法 1.定义概览 Floyd-Warshall算法(Floyd-Warshall algorithm)是解决任意两点间的最短路径的一种算法,可以正确处理有向图或负权的最短路径问题,同时也被 ...

  4. canvas水波纹效果

    先看效果 演示效果 自然界中水波纹效果十分麻烦,我这里只是根据水波纹的几个特性,在理想环境下模拟水波纹的扩散效果. 这里应用到的属性有:扩散.波动.折射. 扩散:很好理解,水波纹会从触发原点开始向周围 ...

  5. 常用linux小工具介绍

    1.ctags(Generate tag files for source code)是vim下方便代码阅读的工具.尽管ctags也可以支持其它编辑器,但是它正式支持的只有VIM. ctags 最先是 ...

  6. Angularjs1.2版本与1.3版本中控制器的问题

    写写今天用ng遇到的一个问题吧.因为刚学习就学视频里面写例子,视频里用的是ng1.2.10版本,我用的是1.5.0. 刚开始的时候我按照ng视频的里面的写,但是控制器就是不能绑定好,后来和同学讨论加搜 ...

  7. winform / Dev全局皮肤组件

    话不多说先上效果图. 由于这是单独的测试项目, 用于演示Dev控件的皮肤样式, 所以上面只是演示了部分控件的效果. 下面则是一些实际项目中的截图: Dev的控件样式不仅美观丰富, 上面仅皮肤设置就有4 ...

  8. 开发抓包工具 Mac charles 3.11.5 破解版 安装包

    摘要 在发开过程中,追踪请求和监控请求与返回数据是我们经常会需要的一个需求,在Mac端,Charles是一款非常易用的抓包工具. 一.简介 Charles是Mac端的一款截取与分析网络请求的工具,在网 ...

  9. arcgis api for js入门开发系列十一地图统计图

    上一篇实现了demo的叠加SHP图层,本篇新增地图统计图,截图如下: 地图统计图实现的思路如下:利用拓展arcgis api的js文件(MapChartGraphic.js以及MapChartGrap ...

  10. vmware克隆虚拟机后网卡名称及网络地址xiuf

    使用vmware克隆虚拟机后,若原主机网卡名称为eth0,那么克隆后的主机使用ifconfig查看仅能看到一个名称为eth1的网卡 并且在/etc/sysconfig/network-scripts/ ...