ReactNative
文章平均质量分 92
Lu'Blog
人生的道路上,无论如何都回避不了现实的重重困难,事业、爱情没有永远的一帆风顺,家庭、学业没有真正的心想事成。但是,只要你不去推诿,不胆怯,保持信心满满,保持良好的心态和旺盛的精力,努力的奋进,你就一定会知道“发光并非太阳的专利,你也可以发光”。
展开
-
TextInput_文本处理
React Native 学习随笔,有不同意见尽情发表!1简单的例import React, { Component } from 'react';import { AppRegistry, Text, TextInput, View } from 'react-native';class PizzaTranslator extends Component { cons原创 2017-06-17 11:27:39 · 3404 阅读 · 0 评论 -
Timers之基础篇
(一)前言Timers(定时器)是应用中非常重要的部分,在React Native中实现和浏览器一致的Timers。(二)基本内容setTimeout,clearTmeoutsetInterval,clearIntervalsetImmediate,clearImmediaterequestAnimationFrame,cancelAnimationFramereq转载 2017-06-24 16:48:31 · 617 阅读 · 0 评论 -
InteractionMnager(交互管理器)
(一)前言今天我们主要看一个可以提升用户体验和交互效果的模块InteractionMnager(交互管理器)(二)基本内容 使用InteractionManager可以让一些耗时的任务在交互操作或者动画完成之后进行执行,这样使用可以保证我们的JavaScript的动画效果可以平滑流畅的执行。可以大大提升用户体验。在应用开发中我们可以如下进行执行任务转载 2017-06-25 09:17:32 · 1768 阅读 · 0 评论 -
React组件refs详解
ref顾名思义我们知道,其实它就可以被看座是一个组件的参考,也可以说是一个标识。作为组件的属性,其属性值可以是一个字符串也可以是一个函数。其实,ref的使用不是必须的。即使是在其适用的场景中也不是非用不可的,因为使用ref实现的功能同样可以转化成其他的方法来实现。但是,既然ref有其适用的场景,那也就是说ref自有其优势。关于这一点和ref的适用场景,官方文档中是这样说的:在从 r转载 2017-06-26 11:06:53 · 18173 阅读 · 0 评论 -
React之ref回调函数实现的两种方式
在《React组件refs详解》这篇文章中,我们讲解了ref的使用场景和使用方法。其中举了一个例子:通过某个事件使input元素获得焦点。这里我们还借用这个例子,在原先的例子中我们使用的是ref字符串的方式,在本篇我们将要是用回调函数的方式来实现。ES6回调函数这里我们使用ES6回调函数实现获取焦点var MyComponent = React.createClas转载 2017-06-26 11:12:07 · 6726 阅读 · 0 评论 -
react-native setNativeProps进阶
在React-Native里面,如果要改变组件的样式可以通过state 或者 props来做到。但有些时候由于性能瓶颈,不得不放弃通过触发render的方式来改样式,而是通过setNativeProps 来直接更改原生组件的样式属性 来达到相同的效果。如下图:header渐变效果上图中的header渐变和搜索框出现都是直通过setNativeProps来实现的。转载 2017-06-26 11:29:45 · 2028 阅读 · 0 评论 -
RN之 ref和setNativeProps使用
1 ref属性不只是string ref属性不仅接受string类型的参数,而且它还接受一个function作为callback。这一特性让开发者对ref的使用更加灵活。render() { return (c) => this._input = c} />; }, componentDidMount() { this._input.focus(); },re原创 2017-06-26 11:37:45 · 2379 阅读 · 0 评论 -
React Native 组件之Touchable*源码解析
源码版本:”React-native”: “0.31.0”react Native的Touchable*系列组件源码位于/node_modules/react-native/Labraries/Components/Touchable/下。 Touchable讲解你将你的ResponderEventPlugin事件和Touchable相关联,Touchable就会去管理转载 2017-06-26 15:08:06 · 961 阅读 · 0 评论 -
React Native中的弹性盒模型(Flexbox)
尊重原版:原链接。 要说移动端最近有什么比较好的技术出现,那么React Native绝对算其中的一个。Learn Once,Write Anywhere,其概念还是十分吸引人的。对那些缺少Native开发(Android,IOS)人员的小公司来说,React Native可以算的上一个很好的解决方案。自己最近也在看React Native,经过几周的阅读研究,发现如果你没原创 2017-06-26 16:38:43 · 522 阅读 · 0 评论 -
React Native之Touchable用法之基础篇
Touchable*系列组件封装了触摸点击的相关事件,比如:触摸、点击、长按、反馈等,官方提供Touchable*系列组件包括四种:TouchableHighlightTouchableNativeFeedbackTouchableOpacityTouchableWithoutFeedback 其中,TouchableWithoutFeedback的触摸点击不带反馈效果,其他三个都有反原创 2017-06-26 15:20:10 · 756 阅读 · 0 评论 -
React-Native之手势基础篇
好的东西都要分享,尊重原版原链接。 React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScript编写原生的移动应用。从2015年3月份开源到现在,已经差不多有半年。目前,React-Native正在以几乎每周一个版本的速度进行快速迭代,开源社区非常活跃。2015年9月15日,React-Native正式宣布支持安卓,并在项目主页中更新转载 2017-06-26 16:15:06 · 7016 阅读 · 0 评论 -
Animated之实例篇
(一)前言上一篇我们已经主要把Animated动画库模块相关内容基础知识点的内容大体的讲解了一篇,但是主要是讲内容,没有讲解具体怎么样使用,所以肯定有很多人会感觉晕晕的~那么今天进行讲解一下该库的一些具体使用实例。本篇文章实例下载地址:https://github.com/jiangqqlmj/AnimatedDemo刚创建的React Native交流七群:131537844,欢迎各转载 2017-06-24 14:23:37 · 1707 阅读 · 0 评论 -
Animated之基础篇-概述
(一)前言之前我们已经学习过LayoutAnimation布局动画了,在移动客户端开发中流畅并且非常有意思的动画对我们提升用户体验是非常有用。所以官方在开发React Native的时候也已经做了相关动画的API:LayoutAnimation和Animated。其中我们已经讲解过用于全局的布局动画LayoutAnimcation了,今天我们主要进行讲解可以创建非常精细化的动画Animat转载 2017-06-24 13:44:44 · 2401 阅读 · 0 评论 -
Animation之基础篇_常用方法
大多数情况下,在 React Native 中创建动画是推荐使用 Animated API 的,其提供了三个主要的方法用于创建动画:Animated.timing() -- 推动一个值按照一个过渡曲线而随时间变化。Easing 模块定义了很多缓冲曲线函数。Animated.decay() -- 推动一个值以一个初始的速度和一个衰减系数逐渐变为0。Animated.spring() -- 产原创 2017-06-24 14:57:27 · 652 阅读 · 0 评论 -
React-navigation之StackNavigator_2进阶
完整代码:import React from 'react';import { AppRegistry, Text, View, Button, ScrollView,} from 'react-native';import { StackNavigator } from 'react-navigation';const BaseScreen = ({nav原创 2017-06-21 21:15:24 · 1567 阅读 · 0 评论 -
React-navigation之TabNavigation
完整代码:import React from 'react';import { AppRegistry, Text, View, Button, ScrollView, StyleSheet, Image,} from 'react-native';import {TabNavigator} from 'react-navigation';class原创 2017-06-22 00:37:03 · 4766 阅读 · 0 评论 -
React-navigator之TabNavigtion2
例:import React from 'react';import { AppRegistry, Text, View, StyleSheet, Platform, ScrollView, Image, Button,} from 'react-native';import { TabNavigator } from 'react原创 2017-06-22 11:31:51 · 782 阅读 · 0 评论 -
React-navigation之StackNavigator
1 先给出资料: 官网:StackNavigator 参考:资料一、资料二有问题找 issues, 基本上坑都在这里。2 导航栏分类按使用形式主要分三部分:(1) StackNavigator: 类似于普通的Navigator,屏幕上方导航栏(2) TabNavigator: 相当于里面的TabBarController,屏幕下方的标签栏原创 2017-06-21 16:04:45 · 24015 阅读 · 3 评论 -
React-navigation之进阶2_repint
React Native 0.43之前 ‘react-native’包里面,但0.43之后了’rea移除了rect-native’。网上的大部分资料,也是ReactNative 0.43之前的 Navigator的用法,然而我用的0.44版本在开发,这就…. 参考: http://facebook.github.io/react-native/docs/navigation.html转载 2017-06-22 16:10:40 · 1458 阅读 · 0 评论 -
React-navigation之DrawerNavigation
1 APIDrawerNavigator(RouteConfigs, DrawerNavigatorConfig)2 DrawerNavigatorConfigdrawerWidth 抽屉的宽度drawerPosition 抽屉的位置 值有left 、right 默认是leftcontentComponent 用来自定义抽屉的组件,默认的组件是DrawerView原创 2017-06-22 17:02:04 · 9465 阅读 · 2 评论 -
React-navigation之总结_repint
react-navigationreact-navigation 是今年1月份新出的一款React-native导航组件, 才几个月github就三千多star, 半官方身份, fb推荐使用, 据称性能和效果跟原生差不多. 可能是react-native导航组件的未来主流. 但现在还是beta版本(最新v1.0.0-beta.7) 坑还比较多, 文档和参考资料较少. 正式项目使用还转载 2017-06-22 16:52:40 · 1774 阅读 · 0 评论 -
Android之adb_reprint
概述 最近研究pc与Android应用程序通过usb通信,顺带研究了一下怎么通过adb启动android应用程序,于是乎看到了am命名(activity manager)。先附上谷歌开发文档中的描述文档路径,里面比我这里讲得详细。http://developer.android.com/tools/help/adb.html#IntentSpec虽然里面讲转载 2017-06-23 14:54:17 · 305 阅读 · 0 评论 -
Android之adb2原理分析_reprint
平时开发android应用 的时候,我们都会用到包含在Android SDK中一系列的工具,或许我们通过Eclipse去调用,又或许,我们自己通过打开终端进行手动输入并且执行,下面我们来一起学习下这些工具的开发使用吧。1.Android Debug Bridge1.1简介Android Debug Bridge,我们一般简称为adb,主要存放在sdk安装目录下的platfo转载 2017-06-23 14:31:54 · 622 阅读 · 0 评论 -
AnimationSequenceView
AnimationSequenceView.js:import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, Animated} from 'react-native';const arr = [];for (var i = 0; i 5原创 2017-06-24 11:02:22 · 327 阅读 · 0 评论 -
React-Native之手势进阶篇
好的东西都要分享,尊重原版原链接。学习之前先看这篇React-Native之手势基础篇。基本的Touch稍微有一点Android基础的人都知道,Android的触摸操作都是绑定在对应的空间上的,我们可以利用view.setOnClickListener,view.setOnTouchListener等方法响应触摸事件。Web上和Android类似,也是通过在相应的组件上添加onCl转载 2017-06-26 17:12:46 · 3348 阅读 · 0 评论