React-Native
文章平均质量分 52
天外野草
现任职移动研发部Team Leader, 高级咨询顾问、开发架构师,移动开发布道师, CSDN专家博主,CSDN讲师, 主修数学专业,曾获全国大学生数学建模大赛、东北三省大学生数据建模大赛一等奖,精通移动开发,熟悉 Angular、React、SAP FIORI等各种HTML5主流框架,对大数据开发,AI技术领域有一定的经验心得,同时拥有丰富的课程录制以及授课经验,也拥有多个大型企业级跨平台项目开发经验,乐观向上,乐于求知,不限领域!
展开
-
React-Native 学习系列课程笔记(React-Native开发环境搭建)
对于2016年最火爆的前端H5框架无疑是Facebook推出的React, React框架可以说是一个系列框架,可以分为web端,服务端,移动端,其核心思想都是自己组件化开发,这也是未来前端或者是移动领域一个不小的趋势所在。那么今天我们就来尝试一下React-Native,这个一个对于一个移动领域不小的突破, 目前其主要针对两个平台,IOS和Android, 我们先来搭建一个开发环境, 这里推荐大家原创 2016-08-11 02:37:52 · 1576 阅读 · 0 评论 -
React-Native之禁用Navigator默认的右滑手势返回上一页
前言对于RN默认的导航组件Navigator, 可以通过右滑切换view,这样效果往往在项目中并不是很需要,但是想要去掉,也着实费了点功夫,下面来看如何解决这个问题?方法主要原理,也很简单,就是设置gestures属性为{}或者null即可,为了方便使用,我们直接看代码:...<Navigator ref="navigator" initialRoute={{name: 'your原创 2017-03-08 14:15:08 · 7911 阅读 · 1 评论 -
React-Native在登陆成功或注销后销毁路由,只保留当前栈
前言在移动APP中,我们经常会遇到登陆成功,或者注销后,不允许返回上一页面,这就需要我们清楚栈中的其余view, RN中我们应该如何处理呢?方法主要原理是借助于onDidFocus和immediatelyResetRouteStack两个方法实现。对此我们先看看Navigator提供给我们默认的方法有哪些?getCurrentRoutes() - 获取当前栈里的路由,也就是push进来,没有pop原创 2017-03-08 14:22:16 · 11235 阅读 · 3 评论 -
React-Native之TextInput实现高度自增长解决方案
前言TextInput在部分业务场景下, 需要随着字体多少进行高度自行调节,那么这个效果如何实现呢?方法为了方便重用,我们定义一个公用的组件:class AutoExpandingInput extends Component{ onContentSizeChange(event) { this.setState({height: event.nativeEvent.cont原创 2017-03-08 15:00:59 · 5065 阅读 · 0 评论 -
React-native之Navigator调用popToRoute无效解决方案
前言在使用RN过程中, 经常会遇到如下场景, 当前在D页面, 栈里有A =》 B => C => D 四个页面, 我们往往需要返回之前的某个页面(B页面),并卸载 C, D两个页面,此时就需要用到官方定义的popToRouter方法,但是本人尝试了一下无效,this.props.navigator.popToRoute({name:'login'});于是查找一番找个了一个方法。方法const ro原创 2017-03-08 17:52:25 · 4521 阅读 · 3 评论 -
React Native模块之Share调用系统分享应用实践
前言对于原生应用开发而言,调用系统匹配的应用进行分享是非常常见操作,今天我们来看一下,RN中如何封装这一个操作的。方法RN中存在一个模块Share, 即为调用匹配的app进行分享操作。在iOS中,通过调用一个包含’action’,’activityType’的对象,然后返回一个Promise对象。如果用户点击关闭弹框,那么调用Share.dismissedAction方法。在Android中,该会调原创 2017-03-08 20:58:36 · 6037 阅读 · 1 评论 -
React Native模块之Permissions权限申请
前言对于移动开发,我们知道Android 6.0之后对于权限管理做了很大的升级,其类似于IOS的管理管理方式需要用手动授权是否允许使用当前权限, 在RN开发中同样存在这样一个模块。处理方法在RN中提供了一个PermissionsAndroid的模块, 可以访问Android M(也就是6.0)开始提供的权限模型。有一些权限写在AndroidManifest.xml就可以在安装时自动获得。但有一些“危原创 2017-03-08 21:16:51 · 10548 阅读 · 0 评论 -
React-Native之无法找到 react-native-windows 问题解决方案
前言最近RN项目升级到0.44, 但是在部分机器上无法正常运行,总是在报很多奇怪的问题,研究一番发下是react-native-windows的问题。其实我也不太清楚问什么会莫名其妙的安装了react-native-windows这个库,导致很多组件应该从ios native库中查找,反而在调用react-native-windows的组件。react-native-windows目前RN可以支持跨原创 2017-05-11 13:15:16 · 4651 阅读 · 0 评论 -
Redux中间件在React和React-Native项目架构中的应用实践
前言在MVVM框架模式独揽天下的今天,React凭借其独特的设计思想,深入的设计理念,开辟了一条崭新的康庄大道,实属是一个重大的突破,为什么这么说呢?因为React论其设计思想,充其量只是MVVM种的V而已,对于大量而且复杂的数据来讲,自身处理上显得有些力不从心,这时候,传统的Redux和Flux的设计思想起到了决定性的作用,对于Redux和Flux这里不多赘述,这个观念在这两年被炒的异常火热,网上原创 2017-01-13 16:12:32 · 4477 阅读 · 0 评论 -
Redux-Saga在React工程架构之的应用实践详解
前言React的作用View层次的前端框架,自然少不了很多中间件(Redux Middleware)做数据处理, 而redux-saga就是其中之一,目前这个中间件在网上的资料还是比较少,估计应用的不是很广泛,但是如果使用得当,将会事半功倍的效果,下面仔细介绍一个这个中间件的具体使用流程和应用场景。redux-saga简介Redux-saga是Redux的一个中间件,主要集中处理react架构中的异原创 2017-01-12 15:12:08 · 24982 阅读 · 0 评论 -
React-Native实际项目开发中的高效率调试实践方案
前言项目开发过程中,调试非常重要,调试工具决定了我们的开发效率,最近在做一个项目采用React-Native框架,对这个框架的调试做了一点研究,为此分享一下个人的见解:方法在运行带RN的工程后,当前页面下ios模拟器通过cmd+D(真机可以通过摇一摇),android通过Menu按键,调出RN的开发者菜单,如图所示,其中有选项“Debug JS Remotely”,可以将JS脚本在浏览器中进行调试。原创 2016-09-28 17:00:07 · 2334 阅读 · 0 评论 -
React-Native之IOS本地模块的应用实践分享(仅此一篇足以...)
前言React-Native从诞生至今,火热程度已经不言而喻,在不断的框架迭代过程中,RN也提供了丰富的组件,以供开发者使用,但是在实际应用中,我们可能需要更为丰富的交互组件,但是RN中又没有及时提供,这时候我们就需要使用RN的本地模块,本地模块即可以使用JS调用Native,也可以使用Native调用JS, 并传递各种参数,实现完整功能,接下来我们看看具体的使用方法,方便大家参考学习,如果想了解更原创 2017-02-15 20:20:59 · 8493 阅读 · 0 评论 -
React-Native跨平台多屏幕尺寸适配方案一览
前言对于RN而言,跨平台已经是不二之选,那么对于不同平台的尺寸的适配又是一个亘古的难题,下面说一下我再项目中的一点实践心得,大神勿喷。方法getstatic静态方法,进行返回屏幕的像素密度。一些例子如下:PixelRatio.get()==1 mdpi Android设备(160 dpi) PixelRatio.get()==1.5 hdpi Android设备(240 dpi)原创 2017-02-23 21:40:44 · 13769 阅读 · 1 评论 -
React-Native编写针对平台的代码
前言我们在实际项目开发中,Android和IOS平台显示的效果可能并不相同,针对不同平台编写不同代码的需求, 下面举例说明React-Native工程下几种平台区分的方法,以供参考。用不同文件夹区分建立不同的文件夹,存放不同平台的代码,是很常见的一种方式,大概如下:/common/components/ /android/components/ /ios/components/ios文原创 2017-01-23 14:10:55 · 6191 阅读 · 0 评论 -
React-Native 学习系列课程笔记(React-Native 开发从零开始)
React-Native 和React的原理大体相同,但是React-Native更多的是用Native组件替代web组件,为了能够更好的理解React-Native,大家最好先了解一下React的基本语法结构。我们先来看看一个简单的Hello world的实现方式:import React, { Component } from 'react';import { AppRegistry, Tex原创 2016-08-11 03:07:21 · 2362 阅读 · 0 评论 -
React-Native在MacOS 10.12 Sierra后无法启动及监听解决方案
问题描述出于好奇,本人最新升级了苹果最新的Sierra系统,最近在调试React-Native项目过程当中发现一个奇怪的问题,项目可以成功build, 通过xcode也可以编译到手机上,但是无法自动启动模拟器,并且报出监听失败的问题,issue截图如下:解决方案需要安装watchman在mac os上,这个一款facebook推出的用来监听文件改变的开源框架。sudo brew install原创 2016-09-28 14:59:31 · 3150 阅读 · 0 评论 -
React-Native工程项目打包编译发布过程详解
前言现在大红大紫的React-Native框架热度可谓与日俱增,React-Native的热更新操作,在开发过程中的确带来很多好处,但是对于发布来讲,不同平台却不尽相同, 下面来具体看一下Android和IOS两个平台是如何执行发布产品的。React-Native之Android平台发布Android平台有两种发布方式,一种是借助于命令行操作,另外一种是借助于Android Studio进行发布,具原创 2017-01-03 19:51:07 · 11644 阅读 · 1 评论 -
React-Native Issue: PCH was compiled with module cache path
最近React-Native项目中发现一个奇怪的问题:当执行:react-native run-ios的时候,发生如下错误:PCH was compiled with module cache path '/Users/tyler/workspace/html5space/HappyTime/ios/build/ModuleCache/HST39TUTS9TS', but the path is c原创 2017-01-04 10:04:49 · 3195 阅读 · 0 评论 -
react-native报错解决方法 in next release empty section headers will be rendered
错误截图解决方法在ListView下 加个 enableEmptySections = {true} 就可以解决了原创 2017-01-11 14:42:08 · 1704 阅读 · 0 评论 -
React-Native调试状态下App运行缓慢问题解决方案
问题正在使用RN进行开发的小伙伴会发现,当我们在远程调试状态下会有这个一个页面提示(黄色)并且App运行非常的缓慢。提示如下:react-native fix this by foregrounding the tab(or opening it in a sepatate window)解决方案有两个采用独立的浏览器tab,也就是一个新的窗口问题解决采用独立的调试app,可以使用一个gith原创 2017-01-11 15:10:36 · 8861 阅读 · 0 评论 -
React-Native版本升级的实践方案
前言在React Native的工程项目中,版本升级是避免不了的,尤其是RN这种框架版本的迭代速度非常之快,如果一味使用旧版本,就无法使用新特性,如果升级,很可能会导致版本兼容问题,正所谓“与何雄站不可兼得”,但是为了长远发展,我们依然要选择升级, 那么对于RN我们如何升级会更好的呢?下面说我我的一些观点。在此强调一下,RN 0.40版本和一下的版本变动比较大, 所以升级方式会有所不同。使用reac原创 2017-01-23 15:06:08 · 7617 阅读 · 0 评论 -
React Native监听Android回退按键,程序化退出应用
前言我们知道Android回退按键,会控制页面返回, 并且退出应用并非真正意义退出,仍在后台运行,所以在某些场景下需要监控android回退按键,那么在React Native中应该如何应用呢?我们具体来看看。BackAndroid此模块用于监听硬件的back键操作。看下具体代码:BackAndroid.addEventListener('hardwareBackPress', function()原创 2017-02-10 16:26:29 · 6434 阅读 · 0 评论 -
React-Native项目中应用剪贴板复制粘贴操作
前言很多APP中都会用到剪贴板的操作,对于React-Native来讲同样也可以实现这个功能。方法Clipboard组件可以在iOS和Android的剪贴板中读写内容。常用API1.得到复制内容static getString() 获取剪贴板的文本内容,返回一个Promise你可以用下面的方式来调用。async _getContent() { var content = await Clipboa原创 2017-02-10 17:19:30 · 9627 阅读 · 0 评论 -
React-Native屏幕适配之ImageView的应用解析
前言对于移动设备来讲,屏幕适配是必不可少的一个工作,但是对于Android和IOS两个平台,图片适配各不相同,那么在React Native中又是如何应用的呢?Native适配方案这里我们先说一下Android和IOS两大平台如何进行图片适配的。1.AndroidAndroid平台采用drawable文件夹区分不同分辨率的图片,android系统会自动区分当前手机的分辨率,并自动进行图片适配,同理也原创 2017-02-13 11:03:52 · 3526 阅读 · 0 评论 -
React-Native应用ListView实现上拉下拉刷新效果实践
前言在移动应用中,上拉刷新加载更多,下拉刷新列表的操作非常常见,那么在React-Native中应该如何实现呢,我们具体来看一下?必备的组件ListView:效果和ScrollView比较类似,但是效率会高些,因为只渲染当前屏幕显示的数据。RefreshControl:这是一个组件嵌入到ListView,ScrollView中,实现刷新的效果。上面两个组件都是RN自带的组件的实现起来比较容易。原创 2017-01-13 15:03:12 · 10114 阅读 · 4 评论