React-Native
文章平均质量分 95
slowlifes
这个作者很懒,什么都没留下…
展开
-
react-navigation使用技巧
本文是基于react-navigation^1.0.0-beta.9来书写的。如果遇到什么问题可以在评论区回复,或者加QQ群397885169讨论识兔,一款用来识别图片的开源项目,在未来还会添加更多有意思的东西react-navigation的Demo什么是react-navigation?react-native从开源至今,一直存在几个无法解决的毛病,偶尔转载 2017-07-08 16:00:56 · 1526 阅读 · 0 评论 -
React Native Picker (多列数据)
** Sample React Native App * https://github.com/facebook/react-native * @flow */"use strict"import React, {Component} from 'react'import { AppRegistry, View, Text, Picker转载 2017-08-08 15:18:05 · 1957 阅读 · 1 评论 -
React-Native 学习之 Flex布局
转自--阮一峰, 此人写的很详细, 收藏了一下, 非常感谢 网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它转载 2017-08-08 15:23:44 · 464 阅读 · 0 评论 -
React-Native 之 Modal介绍与使用
前言遗漏的常用组件,刚发现官方有提供,这边也来介绍一下。如本文有错或理解偏差欢迎联系我,会尽快改正更新!如有什么问题,也可直接通过邮箱 277511806@qq.com 联系我。本章涉及资源下载:链接: https://pan.baidu.com/s/1o84o6JS 密码: htx6属性animationType(动画类型) PropTypes.one转载 2017-08-08 16:20:12 · 515 阅读 · 0 评论 -
React Native之ScrollView控件详解
概述ScrollView在Android和ios原生开发中都比较常见,是一个 滚动视图控件。在RN开发中,系统也给我们提供了这么一个控件。不过在RN开发中 ,使用ScrollView必须有一个确定的高度才能正常工作,因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作)。所以,要给一个ScrollView确定一个高度的话,要么直接给它设置高度(不建议),转载 2017-08-08 16:31:40 · 2760 阅读 · 0 评论 -
React 组件之间如何交流
前言今天群里面有很多都在问关于 React 组件之间是如何通信的问题,之前自己写的时候也遇到过这类问题。下面是我看到的一篇不错英文版的翻译,看过我博客的人都知道,我翻译可能不会按部就班,会尽可能用中文的意思,来将作者要讲述的技术描述清楚。英文能力有限,如果有不对的地方请跟我留言,一定修改……^_^原著序处理 React 组件之间的交流方式,主要取决于组件之间的关系,然而这些关系的约定人转载 2017-08-08 16:51:04 · 410 阅读 · 0 评论 -
React Native使用Mobx总结
参考博客:http://www.jianshu.com/p/505d9d9fe36a 这是我看的学习Mobx目前为止觉得最详细学习的博客了.下面只是记录下我的学习和一些简单的使用:需要引入的库:"mobx": "^3.1.16","mobx-react": "^4.2.2","mobx-react-devtools": "^4.2.15",一.计数器的Mobx转载 2017-08-08 17:13:21 · 4624 阅读 · 1 评论 -
react-native 之style
react-native 不是通过css来实现app的styles,而是依赖于JavaScript。一、声明一个styles:var styles = StyleSheet.create({base:{ width:38, height:38,},background:{backgroundColor:'#222222',},ac转载 2017-08-08 17:52:53 · 1126 阅读 · 0 评论 -
React Native学习笔记
知识点:1.// 用ListView实现类似Android中GridView的布局效果contentContainerStyle={{flexDirection:"row",flexWrap:"wrap"}}2.//删除数据组中的元素,index代表开始位置,1代表删除的个数。data.splice(index, 1);3.// 返回上一级页面this.转载 2017-08-01 22:07:12 · 1412 阅读 · 0 评论 -
React Native声明属性和属性确认
属性声明因为用React Native创建的自定义组件可以复用, 我们开发过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件, 但是他们使用的时候很容易忘记使用某些属性,这时候我们应该在自定义组件中声明一些属性。//自定义组件export default class ConfirmDialog extends Component { //....}Con转载 2017-08-08 14:48:30 · 928 阅读 · 0 评论 -
Immutable 详解及 React 中实践
原文链接 请关注我们的专栏Shared mutable state is the root of all evil(共享的可变状态是万恶之源)-- Pete Hunt有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明,因为同期 React 太火,它的光芒被掩盖了。这些至转载 2017-08-07 17:11:39 · 323 阅读 · 0 评论 -
react-native新导航组件react-navigation详解
react-navigationreact-navigation 是今年1月份新出的一款React-native导航组件, 才几个月github就三千多star, 半官方身份, fb推荐使用, 据称性能和效果跟原生差不多. 可能是react-native导航组件的未来主流. 但现在还是beta版本(最新v1.0.0-beta.7) 坑还比较多, 文档和参考资料较少. 正式项目使用还转载 2017-07-09 20:22:42 · 475 阅读 · 0 评论 -
[React Native]react-native-scrollable-tab-view(入门篇)
官方为我们提供的Tab控制器有两种:TabBarIOS,仅适用于IOS平台ViewPagerAndroid,仅适用于Android平台(严格来讲并不算,因为我们还需要自己实现Tab)如果我们需要一个更通用的Tab控制器,那么就要借助开源的力量,本篇文章教你如何使用react-native-scrollable-tab-view,这是官方Demo的效果demo转载 2017-07-09 23:16:38 · 2254 阅读 · 1 评论 -
React Native 触摸事件处理详解
触控是移动设备的核心功能,也移动应用交互的基础,Android 和 iOS 各自都有完善的触摸事件处理机制。ReactNative(以下简称 RN)提供了一套统一的处理方式,能够方便的处理界面中组件的触摸事件、用户手势等。本文尝试介绍 RN 中触摸事件处理。https://race604.com/react-native-touch-event/1. RN 基本触摸组件RN 的转载 2017-07-10 00:13:14 · 403 阅读 · 0 评论 -
React-Native子组件修改父组件的几种方式,兄弟组件状态修改
子组件修改父组件的状态,在开发中非常常见,下面列举了几种方式。DeviceEventEmitter可以跨组件,跨页面进行数据传递,还有一些状态的修改。http://www.jianshu.com/p/c6991a241b4f兄弟组件可以进行修改,所谓兄弟组件,就是说同一个页面,有两个组件,组件A,组件B,组件A的状态的变化,可以导致组件B的状态变化,有两种方式。第一种,使用Device转载 2017-07-18 21:21:34 · 5259 阅读 · 0 评论 -
React Native自定义控件【底部抽屉菜单】
原生开发中,自定义View可谓是屡见不鲜的事情,往往系统的控件总不能满足现实的需求。五花八门的产品设计需要我们做出不同的View。关于自定义View的内容网上已经有很多的博文,本篇博客要和大家分享如何在React Native中自定义组件实现抽屉菜单控件效果。分享功能在App中的重要性想必是不言而喻的,那么RN中如何实现这种效果呢?react Native 系统库中只提供了iOS的实现,即转载 2017-07-18 21:22:53 · 1246 阅读 · 1 评论 -
react-navigation跨tab路由处理
一般应用都有跨tab跳转的需求, 这就需要特别处理下路由. 下面是使用React-navigation作为路由组件的一种方式.http://www.bijishequ.com/detail/369321具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab. 现在需求是 Home push HomeTwo, HomeTwopush BillTwo, Bi转载 2017-07-18 21:44:35 · 3571 阅读 · 0 评论 -
React-Native 之 Modal介绍与使用
遗漏的常用组件,刚发现官方有提供,这边也来介绍一下。http://www.jianshu.com/p/fa5814afac7d本章涉及资源下载:链接: https://pan.baidu.com/s/1o84o6JS 密码: htx6属性animationType(动画类型) PropTypes.oneOf(['none', 'slide', '转载 2017-07-18 22:03:16 · 2269 阅读 · 0 评论 -
可直接用于React Native开发各种加密标准的JavaScript库(MD5,AES,DES,SHA...)
尊重版权,未经授权不得转载本文来自brix 文章来自江清清的技术专栏(http://www.lcode.org)项目库地址:https://github.com/brix/crypto-js(一).前言之前很多朋友问有没有非常OK的,MD5,AES,DES相关库,需要在React Native上面进行使用。之前我也封装过一下MD5和AES相关的库,但是那个是在原生转载 2017-07-18 22:12:47 · 3096 阅读 · 0 评论 -
React Navigation--Stack Navigator 详细的例子
转载 2017-08-01 22:34:26 · 543 阅读 · 0 评论 -
React Navigation--TabNavigator 详细的例子
/** * Created by YiBing on 2017/5/5. * 本程序效果:类似Android中的ViewPager--有2个页面,可以随手势来回切换,也可以点击Tab切换。 * API Definition -- TabNavigator(RouteConfigs, TabNavigatorConfig)。 * * RouteConfigs -- 和S转载 2017-08-01 22:35:14 · 1860 阅读 · 0 评论 -
react-native项目之样式总结
react native(以下简称rn)里面涉及到的样式规则都是在js文件中写的,一改pc端的在样式文件中定义规则,所以pc端开发习惯的童鞋转向开发rn项目时,可能会对样式感到有些奇怪;其实react在地面实现时会转化对应的样式。 rn中的css样式是css中的一个子集,对css的一些规程进行了阉割,此外还扩展了一些css中没有的规则,例如图片样式中的resizeMode规则属性就是css没转载 2017-08-09 10:15:24 · 704 阅读 · 0 评论 -
React 状态管理库: Mobx
原文地址:https://segmentfault.com/a/1190000010084073React 是一个专注于视图层的库。React 维护了状态到视图的映射关系,开发者只需关心状态即可,由 React 来操控视图。在小型应用中,单独使用 React 是没什么问题的。但在复杂应用中,容易碰到一些状态管理方面的问题,如:React 只提供了在内部组件修改状态的接口转载 2017-08-13 13:56:34 · 10134 阅读 · 1 评论 -
react native极光推送全程教程android和ios
此处我用的是jpush-react-native,这个是极光官网维护的,还有一个是react-antive-jpush,这是中文网的,我这里没用这个上一篇讲了如何申请ios的开发和生产证书的流程,http://blog.csdn.net/liu__520/article/details/53133497先按照官网的步骤来呗:(为了了解具体的过程,我都是用手动配置的,没有用自动配置)转载 2017-08-14 21:27:17 · 1361 阅读 · 0 评论 -
react native 整合极光推送(Android)
react native 整合极光推送(Android)最近项目中需要用到通知,综合比较决定使用极光推送,看了看网上的教程好像都没有一个整合好的例子,或者是步骤有些问题,自己也折腾了很长时间,在此把极光推送配置的步骤整理一下,提供给各位有需要的朋友一.安装我的react native使用的是最新版本0.43.3,对应的极光推送需要同时安装jpush和jcore,npm in转载 2017-08-15 20:34:11 · 585 阅读 · 0 评论 -
实现一个简单的虚拟DOM
原文地址:http://www.cnblogs.com/giggle/p/7538533.html现在的流行框架,无论React还是Vue,都采用虚拟DOM。好处就是,当我们数据变化时,无需像Backbone那样整体重新渲染,而是局部刷新变化部分,如下组件模版:ul class="list"> li>item1li> li>item2li>ul>当页面转载 2017-09-22 16:33:08 · 936 阅读 · 0 评论 -
用React-Native+Mobx做一个迷你水果商城APP
前言最近一直在学习微信小程序,在学习过程中,看到了wxapp-mall这个微信小程序的项目,觉得很不错,UI挺小清新的,便clone下来研究研究,在看源码过程中,发现并不复杂,用不多的代码来实现丰富的功能确实令我十分惊喜,于是,我就想,如果用react-native来做一个类似这种小项目难不难呢,何况,写一套代码还能同时跑android和ios(小程序也是。。。),要不写一个来玩玩?有了这个想法,...转载 2018-03-04 13:43:42 · 496 阅读 · 0 评论 -
React Native App应用架构设计
在上一篇介绍了React Native开发环境搭建,我们已经可以在本地成功运行一个helloword应用了,本节将开始详细分析如何搭建一个React Native App应用架构,并支持完整本地运行预览。完整代码见github索引 [隐藏]1 前言2 项目结构与技术栈2.1 技术栈3 开发调试工具3.1 Nuclide3.2 模拟器调试工具3.3 Reactotron4 组件划分5 跨平台适应5....转载 2018-03-04 13:55:10 · 2538 阅读 · 0 评论 -
React Native 搭配 MobX 使用心得
MobX 是一款十分优秀的状态管理库,不但书写简洁还非常高效。当然这是我在使用之后才体会到的,当初试水上车的主要原因是响应式,考虑到可能会更符合 Vue 过来的思考方式。然而其实两者除了响应式以外并没有什么相似之处。在使用过程中走了不少弯路,一部分是因为当时扫两眼文档就动手,对 MobX 机制理解得不够;其它原因是 MobX 终究只是一个库,会受限于 React 机制,以及与其它非 MobX 管理...转载 2018-03-04 14:17:19 · 1575 阅读 · 0 评论 -
React Native 常用的技术
下一个项目公司也打算使用React native.大致看了下原型设计,写几个小demo先试试水.特此记录下.http://www.cnblogs.com/shaoting/p/7148240.html转载1.微信及朋友圈分享.QQ及朋友圈分享,微博分享,微信支付,支付宝支付.2.导航条渐隐3.通讯录4.卡片式轮播5.时间轴6.图片+列表的转载 2017-07-27 00:41:06 · 555 阅读 · 0 评论 -
React 的数据载体:state、props、context
一、state描述:内部状态(local state)或者局部状态;初始化内部状态:React构造函数中更新内部状态:this.setstate获取内部状态:this.stateexport default class Counter extends Component{ constructor(){ super(); //后才能用this获取实例转载 2017-08-04 00:20:10 · 484 阅读 · 0 评论 -
React-Native 样式指南
原文出处:https://github.com/doyoe/react-native-stylesheet-guideReact-Native 的样式基本上是实现了 CSS 的一个子集,并且属性名不完全一致,所以当你开始在编写React-Native 之前,可以先简要了解一下。当前对应 RN 版本0.44目录Properties 属性Text 文本D转载 2017-08-09 10:17:14 · 1056 阅读 · 0 评论 -
React-Native AsyncStorage setNativeProps
有时候我们需要直接改动组件并触发局部的刷新,但不使用state或是props。 setNativeProps 方法可以理解为web的直接修改dom。使用该方法修改 View 、 Text 等 RN自带的组件 ,则不会触发组件的 componentWillReceiveProps 、 shouldComponentUpdate 、componentWillUpdate 等组件生命周期中的方法。使转载 2017-08-09 15:17:36 · 453 阅读 · 0 评论 -
ReactNative分组列表SectionList使用详情及示例详解
《逻辑性最强的React Native环境搭建与调试》《ReactNative开发工具有这一篇足矣》《解决React Native unable to load script from assets index.android.bundle on windows》《React Native App设置&Android版发布》《史上最易懂——ReactNative分组列表转载 2017-08-09 15:21:43 · 1696 阅读 · 0 评论 -
react-navigation使用技巧(进阶篇)
转子http://www.jianshu.com/p/b877115fff1b之前写过react-navigation使用技巧,那篇文章中主要讲了React-navigation的属性,封装和一些小技巧。虽然上篇文章中也有一些小技巧,但因为补充的比较晚,导致有些人没有看全,再加上我又找到了一些新的小玩意,特此写了本篇文章,如果之后还有新发现,也会再这篇文章中更新出来。如果遇到什么问题可以在转载 2017-08-09 16:20:11 · 5885 阅读 · 0 评论 -
react-navigation使用技巧
本文是基于react-navigation^1.0.0-beta.9来书写的。如果遇到什么问题可以在评论区回复,或者加QQ群397885169讨论识兔,一款用来识别图片的开源项目,在未来还会添加更多有意思的东西react-navigation的Demoreact-navigation使用技巧(进阶篇)什么是react-navigation?react-native从开源至今转载 2017-08-09 16:31:56 · 347 阅读 · 0 评论 -
Redux "使用"教程
如果觉得识兔项目可以,欢迎给个star,在稍后的日子里,识兔将会不断完善,如果有什么有意思的需求可以提出来,我可能会加在识兔里面哦!本文的Demo最终的运行效果运行效果.gif前言本文仅写给在项目中没用使用过redux,又急于利用redux开发的同学们。之前开源rn版百思不得姐的时候,写过几篇文章,有人问什么时候会出rn+redux的文章,我也犹豫了很久,因为在开源转载 2017-08-09 16:45:25 · 497 阅读 · 0 评论 -
REACT NATIVE模块桥接详解
在这篇文章中,我假设你已经掌握了React Native的基础知识,并且有兴趣了解JavaScript和本地通信的内部工作原理。主线程在开始之前,我们首先要知道React Native中的3个重要的线程:Shadow Queue: 负责布局的控制Main Thread: UIKit运行的线程JavaScript Thread: JS代码在该线程运行此转载 2017-08-02 16:43:54 · 1360 阅读 · 0 评论 -
React Native通信机制详解
React Native是facebook刚开源的框架,可以用javascript直接开发原生APP,先不说这个框架后续是否能得到大众认可,单从源码来说,这个框架源码里有非常多的设计思想和实现方式值得学习,本篇先来看看它最基础的JavaScript-ObjectC通信机制(以下简称JS/OC)。概览React Native用iOS自带的JavaScriptCore作为JS的解析转载 2017-08-03 23:03:14 · 518 阅读 · 0 评论 -
React Native——react-navigation的使用
在 React Native 中,官方已经推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换。 react-navigation 主 要包括三个组件:StackNavigator 导航组件TabNavigator 切换组件DrawerNavigator 抽屉组件StackNavigator 用于实现各个页面之间的跳转, TabNavigator 用来实现同一个页...转载 2018-07-11 17:26:03 · 1166 阅读 · 0 评论