React-native初体验(安卓篇)
本篇文章主要包括两方面,如何从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交互的处理
NativeModules:native暴露出来的模块,可以通过NativeModules对象取到。
有些场景需要native直接传递某些参数到RN端,iOS可以通过调用initWithBundleURL,在initialProperties参数传参,android通过getLaunchOptions把参数写入返回的bundle中。在RN工程的根文件(例如app.js),通过this.props.key(key是属性名字)直接取到。
如果你喜欢我们的文章,关注我们的公众号和我们互动吧。
React-native初体验(安卓篇)的更多相关文章
- 手把手教你React Native 实战之开山篇《一》
先说一下我为什么学习RN 18年3月29号,随着自己内心的欲望和冲动,任务交接了一下,正式离开一家医疗公司.第二天就入职了这之前已经找好的公司,由于自己对代码浓厚的热情,自己终于也不再带团队.正好有充 ...
- 安装android Studio和运行react native项目(基础篇)
ANDROID_HOME环境变量 确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径. 打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设 ...
- 0、手把手教React Native实战之开山篇
##作者简介 东方耀 Android开发 RN技术 facebook github android ios 原生开发 react reactjs nodejs 前端 ...
- spring native 初体验实现 小米控制美的空调
目前关于 spring native 分享的文章还比较少 写这篇文章的主要目前是分享一下自己写的一个 小米控制美的空调 的程序 集成 spring native 过程中碰到的一些问题和解决方法 先放地 ...
- (转)Delphi2009初体验 - 语言篇 - 智能指针(Smart Pointer)的实现
转载:http://www.cnblogs.com/felixYeou/archive/2008/08/27/1277250.html 快速导航 一. 回顾历史二. 智能指针简介三. Delphi中 ...
- SDDC的Windows初体验-QT篇
前言 如果熟悉爱智和看过我之前文章的朋友见到这篇文章一定会有很大疑问,SDDC 作为智能设备发现控制协议,怎么会用在 windows 上? 这一切还是源自于我巨大的脑洞,因为这段在搞 Windows ...
- vue-cli@3.x初体验之前篇-回顾vue-cli@2.x创建项目的流程
模拟实际工作中的操作,假如新开启了一个vue项目,可以先看看上篇博文中的git操作,新建空仓库vue-demo,并拉取到本地,创建本地dev分支后 1. 全局安装vue-cli yarn global ...
- Hybrid App 和 React Native 开发那点事
简介:Hybrid App(混合模式移动应用)开发是指介于Web-app.Native-App这两者之间的一种开发模式,兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开 ...
- 学习React Native必看的几个开源项目
学习React native ,分享几个不错的开源项目,相信你学完之后,一定会有所收获.如果还没有了解RN的同学们可以参考手把手教你React Native 实战之开山篇<一> 1.Fac ...
- React Native 入门到原理(详解)
抛砖引玉(帮你更好的去理解怎么产生的 能做什么) 砖一.动态配置 由于 AppStore 审核周期的限制,如何动态的更改 app 成为了永恒的话题.无论采用何种方式,我们的流程总是可以归结为以下三部曲 ...
随机推荐
- java实现发送邮件
前言:先引入javamail用到的jar包, 自己下载http://fhed.v061.10000net.cn/gulili198509051s/newjspkongjian/ueditor/jsp/ ...
- Unslider Web前端框架之图片轮播
前端框架,前端组件,前端库,都是一个意思,能看源码. 最近做H5小游戏,用到了图片轮播的组件,而且要求支持移动端触屏滑动.一开始用的是nivo slider,但是对大小不一样的图不支持box 的参数设 ...
- 纯CSS3实现圆形进度条动画
悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...
- jsp图片上传
1.要实现图片上传,首先需要一个组件,这里我用的是smartupload.jar可以到这里下载http://download.csdn.net/detail/mengdecike/8279247 2. ...
- Swift App项目总结
最近公司新开了一个项目,由于我的同事的离职,所以就剩我自己了.于是就果断的使用纯纯Swift写了,之前也用过Swift,不过很早了,那时候Swift还不稳定,每次一升级Xcode,Swift升级以后语 ...
- Java 基础 变量介绍
变量的声明和使用 概念: 变量是指内存中的一个存储区域,该区域要有自己的名称(变量名).类型(数据类型),该区域的数据可以在同一数据类型的范围内不断变化值: 变量的使用注意事项: Java中的变量必须 ...
- WPF编程-WPF体系结构
WPF简介 Windows Presentation Foundation(WPF)是微软新一代图形系统,运行在.NET Framework 3.0架构下,为用户界面.2D/3D 图形.文档和媒体提供 ...
- 【LeetCode】49. Group Anagrams
题目: Given an array of strings, group anagrams together. For example, given: ["eat", " ...
- redis可视化工具redisClient
下载连接:百度网盘 直接解压就可以用了
- 新技能get√10个PS加速小技巧让你的PS不再卡
如果你在处理较大尺寸的图片.使用像HDR.图像合成或者3D和视频等类似的功能,优化Photoshop的性能是非常关键的.这篇文章中,我会为大家介绍几种提高Photoshop性能的建议,使其在你的电脑上 ...