react native
文章平均质量分 89
React Native使你只使用JavaScript也能编写原生移动应用。 它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的用户界面。
__卓原
程序员~
展开
-
ES7中数组的一些常用方法
将多维数组转化成一维数组 数组扁平化 /** * 多维数组转一维 reduce */ toOne(array) { return array.reduce( (begin, current) => begin.concat(Array.isArray(current) ? thi...原创 2018-06-11 19:55:18 · 1801 阅读 · 0 评论 -
JavaScript 加密库 crypto-js
介绍github地址 CryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加密算法。目前已支持的算法包括:MD5SHA-1SHA-256AESRabbitMARC4HMAC HMAC-MD5HMAC-SHA1HMAC-SHA256PBKDF2安装 npm install crypto-js使用impor...原创 2018-07-19 18:41:28 · 8423 阅读 · 0 评论 -
ReactNative 倒计时组件 react-native-zyCountDown
react-native-zyCountDown用于react-native的计数组件,倒计时组件封装的一个倒计时按钮,仅仅使用TouchableOpacity,View和Text. 安装npm i react-native-zycountdown或者yarn add react-native-zycountdown使用两个使用方式样式分别对应下面...原创 2018-07-20 16:34:50 · 2722 阅读 · 0 评论 -
ReactNavigation V2 监听物理返回键
首先导入BackHandler组件import { BackHandler,} from 'react-native';在构造函数中监听,并在willunmount中取消它constructor(props) { super(props); this.state = {}; BackHandler.addEventListene...原创 2018-08-07 11:06:15 · 2116 阅读 · 6 评论 -
React Navigation 跳转页面时回调
跳转页面时,传递参数,把回调方法作为参数传递进去。onPress={() => this.props.navigation.navigate('cameraID', { onBack: (imgUri) => { this.setState({kt...原创 2018-08-10 14:18:12 · 1692 阅读 · 0 评论 -
react-native 轮播图 ——react-native-swiper使用
今天学习了轮播图的使用,上网查阅了一下,发现有react-native-swiper和React-Native-Viewpager 两种封装的比较好的第三方组件,对比了下文档,觉得react-native-swiper功能更加完善,而且文档说明比较全面,所以只用了react-native-swiper,下面介绍下react-native-swiper的使用。该组件同时支持android和iOS。原创 2017-05-23 23:02:31 · 33473 阅读 · 20 评论 -
react navigation的学习与使用
在很久之前,RN中文网说推荐用react-navigation替代navigator作为新的导航库,从RN 0.43版本开始,官方就已经停止维护Navigator了,所以强烈建议大家迁移到新的react-navigation库,而且新的导航库无论从性能还是易用性上都要大大好于老的Navigator!附上英文文档地址,这个是我自己写的导航例子:https://github.com/lizhuoyua...原创 2017-06-04 00:03:33 · 10928 阅读 · 2 评论 -
react-native播放视频组件 react-native-video的用法
react-native-video 是一个播放视频的开源组件,它的用法很简单。1.安装依次执行下面两个命令,npm i -S react-native-videoreact-native link (这一步是连接本地视频库)(1) ios:如果您想允许其他应用在您的视频组件上播放音乐,请添加:AppDelegate原创 2017-06-10 16:55:18 · 27308 阅读 · 7 评论 -
react-native调用Android原生模块
今天学习了一下在react-native中调用原生安卓模块的使用,发现很多网上的文章都是直接照抄的文档,这样会有一些坑,导致最后无法运行或者成功调用,所以写下这个博客来分享,同时也记录一下学习过程,方便以后查看。学习理由:有时候App需要访问平台API,但React Native可能还没有相应的模块包装;或者你需要复用一些Java代码,而不是用Javascript重新实现一遍;又或者你需要原创 2017-06-12 23:23:09 · 3357 阅读 · 5 评论 -
React-Native PanResponder的学习与使用
今天学习了PanResponder的简单用法,记录一下,具体方法介绍等都在注释里/** * Created by 卓原 on 2017/6/16. *功能:可以拖拽的小球,当松开那一刻判断小球是属于屏幕左边还是屏幕右边, * 属于左边则让小球紧靠屏幕左边,如靠屏幕右侧,则让小球紧靠屏幕右侧。 */import React from 'react';import {...原创 2017-06-16 13:40:46 · 4596 阅读 · 3 评论 -
React Native 动画 ---Animated
关于Animated动画,使用的时候组件不能直接写要写成 Animated.Text>Animated.Text>先实现一个简单的动画:首先导入动画组件:import { StyleSheet, Text, View, Animated, Easing,} from 'react-native';看一下要实现原创 2017-06-20 23:56:35 · 1022 阅读 · 0 评论 -
react-native Modal的学习与使用
原生有Dialog,Toast之类的弹窗控件,React-Native虽然也有Dialog,但是并不好用,所幸有Modal这个组件,使用起来简单,而且还比较好用。之前一直有知道这个控件,但因为没有需要用到所以没有看过如何使用,今天同事有需要,就看了一下,写了个demo,自己也趁机学习下Modal的使用。 一.首先是使用,导入Modal组件。 import { AppR...原创 2017-06-23 00:15:13 · 4813 阅读 · 0 评论 -
react-native Alert组件
Alert是一个提示对话框,包含对应的标题和信息。RN有默认的alert方法可以使用,例如:alert('哈哈哈')但是太过单一,只能弹出一个文字如果想弹出稍微复杂点的,例如原生的有很多按钮的提示框则需要Alert组件。首先来看一下文档的描述:iOS:在iOS上你可以指定任意数量的按钮。每个按钮还都可以指定自己的样式,此外还可以指定提示的类别。参阅AlertIOS来了解更多细节原创 2017-06-26 21:24:56 · 10783 阅读 · 2 评论 -
react-native 定时器
定时器是一个应用中非常重要的部分。React Native实现了和浏览器一致的定时器Timer定时器:setTimeout, clearTimeoutsetInterval, clearIntervalsetImmediate, clearImmediaterequestAnimationFrame, cancelAnimationFramerequestAnimati原创 2017-06-26 22:29:35 · 2091 阅读 · 0 评论 -
react-native 屏幕尺寸和文字大小适配
现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同,比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到了其他设备可能就会偏小或者偏大,这就需要我们对屏幕进行适配。安卓原生的话有自己的适配规则,可以根据不同的尺寸建立不同的文件夹,系统会根据当前的设备尺寸取对应的大小的布局。而RN本身并没有适配规则,...原创 2017-06-27 22:45:14 · 34523 阅读 · 26 评论 -
React PropTypes 定义组件的属性类型和默认属性
我们在定义组件的时候,通常会给它传属性,比如作为FlatList,Listview的item或者要导入到其他位置的时候,都需要给这个item组件传递值,有的时候,可能我们传值会的值没有定义,打个比方:<FlatList style={{backgroundColor:'#999999',width:250}} data={[{name: 'a',age:11}, {name原创 2017-07-03 00:11:08 · 12265 阅读 · 2 评论 -
react-native flatlist 的进阶使用 (头尾,间隔组件和滚动事件)
0.43之后 RN添加了Flatlist组件,作为ListView的增强版,FlatList有着很强的性能上的优势,而且使用起来也更简单。最基础的:<FlatList data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) => Text>{item.key}Text>}/>最好是给data数据每一个item都添加一个ke原创 2017-07-04 22:26:22 · 30176 阅读 · 5 评论 -
React-Native 发送和接收事件DeviceEventEmitter
写原生的时候,我们经常会用到广播,接口,回调等方法来实现发送和接受通知以及通信的。那么在RN中,也有一套发送和接收通知的方法,用的组件是DeviceEventEmitter。下面看一下,RN中是如何发送和接收事件的:1 首 先 ,导入DeviceEventEmitter组件:import { View, Text, Button, Dev原创 2017-07-08 15:17:39 · 15298 阅读 · 0 评论 -
react-native 轮播组件 looped-carousel使用介绍
一 关于轮播类组件,网上其实已经有挺多了,本人曾经用过 swiper,viewpager,以及facebook出品的viewpagerAndroid。swiper因在安卓上有问题,而且在组件嵌套使用时问题较多,所以弃用。后来尝试viewpager,因为轮播时,下面的圆点显示有误,所以弃用。而ViewpagerAndroid因为只支持安卓系统,所以很少用到,在ios必须另找组件。最近原创 2017-07-31 14:58:42 · 8303 阅读 · 7 评论 -
react-native 侧滑组件 react-native-swipe-list-view
一。由于项目需要支持左滑&右滑的list组件,所以上网看了一下,发现了 react-native-swipe-list-view 觉得不错,分享给大家。(1).此库支持单个组件的左滑右滑,也支持list组件的左滑右滑首先看一下效果图:1.支持左滑和右滑,2.支持设置禁止左滑和右滑。3.list组件支持点击其他item时关闭当前item左滑/右滑等等。二。使用1原创 2017-08-02 17:31:16 · 7073 阅读 · 0 评论 -
react-native SectionList的使用
之前facebook发布了高性能的列表组件 Flatlist(可理解为优化后的Listview),后来又增加了一个SectionList。属于增强版的Flatlist,支持头部悬浮等,如果你的列表不需要分组(section),那么可以使用结构更简单的<FlatList>。关于FlatList的使用,可参考:react-native flatlist 的进阶使用而且二者之间有...原创 2017-08-03 16:25:11 · 4398 阅读 · 1 评论 -
react-native 获取网络状态
ReactNative 中有 个模块NetInfo,可以获取设备的联网或者离线状态。有如下几个方法://获知设备联网或离线的状态信息NetInfo.fetch().done((reach) => { // alert(reach);});这个reach为获取到的网络状态,有如下字段:IOS以异步的方式判断设备是否联网,以及是否使用了移动数原创 2017-08-04 16:04:12 · 2190 阅读 · 0 评论 -
react-native 打包apk 之 安卓离线包全过程
前言:完成项目时,我们需要将项目打包成一个apk,方便测试以及发布版本.这时,需要把js代码和图片资源都放进apk中, 并且发布版本还需要签名,今天把这一系列操作记录下来.一.生成离线bundle包离线包就是把 ReactNative 和你写的 js文件、图片等资源都打包放入 App ,不需要走网络下载。首先看一下官方给的参数(中文版):react-native...原创 2017-08-14 15:47:03 · 22099 阅读 · 0 评论 -
react-native 仿京东加入购物车动画效果
我们先看一下 京东加入购物车的动画是怎样的:然后看一下,我目前的实现效果(后续会完善) :原创 2017-08-18 10:50:23 · 2030 阅读 · 0 评论 -
reactnative 与webview通信
WebView是ReactNative中的组件 , 它可以创建一个原生的WebView,可以用于访问一个网页.有时候我们需要在RN与WebView之间进行通信,或者进行数据传递,或者发送消息通知.这时候就要用以下知识了.一:WebView向RN端发送数据:首先,我们构建一个webview:<WebView ref={'webview'} source={原创 2017-09-25 10:39:26 · 4950 阅读 · 1 评论 -
ReactNative 获取地理位置信息
ReactNative 提供了一个定位API: Geolocation 用来获取设备所在的地理位置.定位API遵循web标准。iOS 你需要在Info.plist中增加NSLocationWhenInUseUsageDescription字段来启用定位功能。如果你使用react-native init创建项目,定位会被默认启用。Android 要请求访问地理位置的权限,你需要在AndroidMa原创 2017-11-07 16:53:39 · 2862 阅读 · 2 评论 -
ReactNative 刘海屏适配iPhoneX
iPhoneX 出了之后 , 它的小刘海和底部的home条成为了移动端程序员需要适配的地方, 今天用ReactNative 初步在项目上尝试了适配. 先看一下iPhonex7和X上同样代码的效果图:UI适配导航栏适配iPhoneX由于多了大圆角、传感器(齐刘海)以及底部访问主屏幕的指示遮挡,所以需要注意原有这部分内容的设计。 iOS11前导航栏的高度是64,其中statusBa...原创 2017-11-21 14:51:08 · 20483 阅读 · 6 评论 -
Mobx在ReactNative中的使用
MobX简单、可扩展的状态管理 Github 仓库: https://github.com/SangKa/mobx-docs-cn入门MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:任何源自应用状态的东西都原创 2017-11-30 16:41:47 · 1315 阅读 · 0 评论 -
babel-plugin-module-resolver 模块解析插件
babel-plugin-module-resolver 是一个Babel模块解析插件, 在.babelrc中可以配置模块的导入搜索路径. 为模块添加一个新的解析器。这个插件允许你添加新的“根”目录,这些目录包含你的模块。它还允许您设置一个自定义别名目录,具体的文件,甚至其他NPM模块。使用方法:npm install --save-dev babel-plugin-module-resolver原创 2017-12-07 11:16:21 · 13664 阅读 · 0 评论 -
ReactNative 图片上传保存 CameraRoll的使用
本文主要介绍CaremaRoll的使用(保存图片,获取手机图片) 图片上传(常用于上传头像功能)CaremaRoll介绍结合官方文档做说明:CameraRoll模块提供了访问本地相册的功能。在iOS上使用这个模块之前,你需要先链接RCTCameraRoll库,具体做法请参考链接原生库文档。译注:本模块只提供了基本的访问图片的功能,并没有提供相册界面。对于多数开发者来说,可能原创 2018-01-16 15:43:08 · 5693 阅读 · 1 评论 -
ReactNative 抽屉组件 侧滑栏 react-native-side-menu
示例图:安装npm install react-native-side-menu --save使用引入组件import SideMenu from 'react-native-side-menu';使用组件:render() { const menu = Text style={{marginTop: 22}}>aaaText原创 2018-02-06 14:50:12 · 7451 阅读 · 1 评论 -
reactnative热更新 react-native-pushy
快速入门-准备工作首先你应该有一个基于React Native开发的应用,我们把具有package.json的目录叫做你的”应用根目录”。如果你还没有初始化应用,请参阅开始使用React Native。所以我们也假设你已经拥有了开发React Native应用的一切环境,包括Node.js、npm、XCode、Android SDK等等。如果你之前没安装过,你还必须安装Androi...原创 2018-02-08 17:09:03 · 4073 阅读 · 1 评论 -
ReactNative 封装fetch网络请求
封装的fetch方法类/** * Created by 卓原 on 2017/11/14. * zhuoyuan93@gmail.com *//** * 请求头 * @type {{Accept: string, Content-Type: string}} */const header = { 'Accept': 'application/json', ...原创 2018-03-01 17:36:20 · 880 阅读 · 0 评论 -
ReactNavigation 重置路由栈的两种方法 以及SwitchNavigator不处理回退操作
我们在项目中尝尝有这样的需求 , 给app添加一个广告业/启动页/引导页等等, 之后进入app的主页面 , 前面的 广告业/启动页/引导页 不提供入口,并且按返回键也不会回到那个页面. 一般我们会跳转到主页之后重置路由,今天提供两种方法来实现.首先是跳转之后重置路由://首先导入NavigationActionsimport {NavigationActions} from 'react...原创 2018-03-02 14:28:48 · 13358 阅读 · 2 评论 -
ReactNative 原生UI组件 桥接原生 Android
React Native已经封装了大部分最常见的组件,譬如ScrollView和TextInput,但不可能封装全部组件。而且,说不定你曾经为自己以前的App还封装过一些组件,React Native肯定没法包含它们。幸运的是,在React Naitve应用程序中封装和植入已有的组件非常简单。原生视图需要被一个ViewManager的派生类(或者更常见的,SimpleViewManager的派...原创 2018-04-02 16:10:00 · 2492 阅读 · 1 评论 -
ReactNative面试题
1 . 打印出a的值是?if(true){let a = 1} alert(a)答: a is not defined let不存在变量提升,且作用域只在代码块 这样看你可能有点不太清楚,我们来格式化代码if (true) { let a = 1}alert(a)这样是不是一目了然了?! 博主第一看的的时候没有仔细看,匆匆就写了个1 ,尴尬. 扩展1.va...原创 2018-04-17 16:41:19 · 3511 阅读 · 0 评论 -
js判断对象类型的两种方法
在js 中 , 有一种判断数据基本类型的方法 typeof , 只能判断5中基本类型:即 “number”,”string”,”undefined”,”boolean”,”object” 五种。用法为:typeof 1typeof strconsole.log(typeof 1) //打印出 numbertypeof 'a' == 'string' //结果为true...原创 2018-04-27 11:26:51 · 28249 阅读 · 0 评论 -
Promise 的then 与 async await 写法相互转化
本来一直是用then来对promise进行处理的 , 今天在用react-native-stroge的时候发现作者很推崇async await的写法 于是研究了一下,把自己的代码替换了. 下面进入正题在使用的时候,我存值时是这么写的: // 存值 createData(title, successBack, errorBack) { // 使用key保...原创 2018-05-04 16:52:10 · 22507 阅读 · 2 评论 -
ReactNative 热更新,集成CodePush
开篇先介绍另外一种热更新方式:pushy, 这是rn中文网推荐的,phshy集成方法CodePush简介CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务。 CodePush 是提供给 React Native 和 Cordova 开发者直接部署移动应用更新给用户设备的云服务。CodePush 作为一个中央仓库,开发者可以推送更新...原创 2018-05-16 00:39:13 · 1011 阅读 · 0 评论 -
ReactNative 吸顶
感谢同事提供的店铺UI图和思路。 图录的不太好,但意思差不多表明了。其实如果结构不复杂的话,可以使用SectionList实现,但我这用的是ScrollTabView,ScrollTabView里面还有列表组件,嵌套在SectionList中很麻烦。。。对 我试过了。。。最开始我的思路是: 滚动组件包括ScrollView,ListView,FlatList,Se...原创 2018-06-16 19:58:25 · 5414 阅读 · 16 评论