本篇文章主要包括两方面,如何从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. selinux导致docker启动失败

    1. 问题描述:一向运行正常的一群容器,突然有一天挂掉了,再也起不来,报错如下 Error response from daemon: devmapper: Error mounting '/dev/ ...

  2. 用WebStorm创建Express项目时出现:express version is unavailable

    那是因为在npm的配置文件中使用了代理: 方式一:查看配置:npm config list如果有:registry = "https://registry.npm.taobao.org/&q ...

  3. cpp(第十一章)

    1. std::istream & operator>>(std::istream &is,complex_c &t) { std::cout<<&qu ...

  4. dedecms列表页调用子栏目列表,织梦首页调用栏目的子栏目标签代码

    dedecms列表页调用子栏目列表,织梦首页调用栏目的子栏目标签代码. dedecms列表页调用子栏目列表标签: {dede:channelartlist type='sun' }<a href ...

  5. android打电话

    一.安卓中,TelephonyManager是电话管理器,它管理着电话的所有服务. 1.如图,为一个简单的打电话应用,他是通过调用系统API实现的,必须添加权限 2.先看清单文件,此处添加权限 < ...

  6. 每天一个JS 小demo之留言板。主要知识点:DOM方法的理解和运用

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  7. Spring学习(3)---Spring设值注入和构造注入

    (一)设值注入就是指要被注入的类中定义有一个setter()方法,并在参数中定义需要注入的对象.简单的看个例子. 建一个User类: package com.ioc; public class Use ...

  8. php实现ppt转图片,php调用com组件问题

    PHP 调用com组件将ppt转为图片. 需要在php.ini中开启 extension=php_com_dotnet.dllcom.allow_dcom = true   测试代码如下:   < ...

  9. Java基础——多态

    多态性是指允许不同类型的对象对同一消息做出相应.具有灵活性.抽象.行为共享.代码共享的优势,共享就意味着最大化利用和简洁,还有就是加载速度. 一.多态的作用 消除类型之间的耦合关系.即同一事件发生在不 ...

  10. 基于angularJs的单页面应用seo优化及可抓取方案原理分析

    公司使用angularJs(以下都是指ng1)框架做了互联网应用,之前没接触过seo,突然一天运营那边传来任务:要给网站做搜索引擎优化,需要研发支持.搜了下发现单页面应用做seo比较费劲,国内相关实践 ...