react native 学习之旅
文章平均质量分 51
好记性不如烂笔头
老孟Flutter
出版《Flutter 实战入门》一书,专注分享Flutter原理及实践应用,个人博客地址:http://laomengit.com
展开
-
react native 获取验证码
获取验证码控件:https://github.com/781238222/react-native-verify-code原创 2017-08-02 15:34:15 · 4999 阅读 · 0 评论 -
react-native 分割线
react-native 分割线:https://github.com/781238222/react-native-divide原创 2017-08-02 15:35:01 · 8584 阅读 · 0 评论 -
react-native http封装
react-native http封装:https://github.com/781238222/react-native-http原创 2017-08-02 15:35:47 · 1477 阅读 · 0 评论 -
react-native modal封装
github地址:https://github.com/781238222/react-native-xmodal原创 2017-08-02 15:37:16 · 1576 阅读 · 0 评论 -
react native 顶部控件
github地址:https://github.com/781238222/react-native-header-bar原创 2017-08-02 15:38:22 · 1434 阅读 · 0 评论 -
学习博客园开源代码笔记(一)
学习别人写的项目是一个不错的学习方法,地址:https://github.com/togayther/react-native-cnblogs 看别人代码的时候可能会遇到各种问题,这里做下记录也希望大家能解惑。index.android.js或者index.ios.js是项目的开始界面,很简单的一个界面,注册了一个控件,需要注意的是图中红框的部分from后面到文件夹,而不是具体的文件,这种情况下默认原创 2017-06-30 16:49:36 · 873 阅读 · 0 评论 -
学习博客园开源代码笔记(startup页面)
startup页面效果图:页面的基本逻辑:logo动画->是否登录 已经登录跳转到home页面,未登录弹出登录modal。看下render方法:render() { return ( <View style={ [ ComponentStyles.container, CommonStyles.flexItemsCenter, CommonStyles.flexItemsMidd原创 2017-07-03 15:46:36 · 678 阅读 · 0 评论 -
学习博客园开源代码笔记(登录页面)
效果图: render() { return ( <View style={ [ComponentStyles.container] }> { this.renderHeader() } <ScrollView keyboardShouldPersistTaps = {'always'}> { this原创 2017-07-05 15:48:43 · 756 阅读 · 0 评论 -
react native 封装Touchable 组件
上一篇我们讲解了4个Touchable 组件的基本用法,既然系统提供了那我们为什么要自己封装呢,自己封装有下面几个好处:一旦需求变化我们不用全局修改,只需要修改我们封装组件。全局统一。目前rn还不是很完善,尤其是第三发资源比较少,我们要学会自己封装组件。我们封装Touchable 组件的基本要求:对4个组件效果的观察我个人觉得android使用TouchableNativeF原创 2017-04-19 17:07:51 · 926 阅读 · 0 评论 -
react native 闪屏页(启动页)封装
基本上大部分app都会有一个闪屏页(启动页),下面我们就封装一下,要求:一张图片透明度在1500ms时间内由0.4变化为1。提供图片source和动画执行完毕的回调。/** * Created by on 2017/3/24. * 闪屏页,一般的项目都会带闪屏页 * 1.5秒渐变后跳到主页 */import React, {Component, PropTypes,} from '原创 2017-06-05 17:41:37 · 3457 阅读 · 0 评论 -
react native Back 按钮封装
项目中返回按钮出现的频率非常高,所以我们封装一个Back按钮,基本要求如下: 传入图片资源作为按钮图片 可以设置点击区域style和图片style 点击回调函数 传入react-navigation 的navigation,点击直接goBack/** * Created by on 2017/3/27. */import React, {Component, PropT原创 2017-06-06 10:52:42 · 1073 阅读 · 0 评论 -
react native 密码控件 封装
密码控件 主要包含以下功能: 1、点击右侧的icon显示明文/密文 2、相应的icon变化。封装代码:/** * Created by on 2017/3/31. */import React, {Component, PropTypes} from 'react';import { StyleSheet, TextInput, View, Image,原创 2017-06-30 14:44:04 · 4128 阅读 · 0 评论 -
react native Toast封装
app经常用到消息的提示功能,封装效果图: 样式我封装的只有2个样式,错误提示就像图中一样,红底,普通提示是黑底,如果需要求他样式请自行修改。封装代码:import React, {Component} from 'react';import { StyleSheet, View, Text, Animated, Image, NativeMo原创 2017-07-07 09:58:13 · 2169 阅读 · 0 评论 -
react native ActivityIndicator使用详解
react-native版本:0.43ActivityIndicator的效果类似我们平时看到了loading,在android中ActivityIndicator是progressBar 的Indeterminate(false)模式,说白了就是一个半圆转啊转。 具体属性: 1、ViewPropTypes props… :包含View控件的所有属性,具体咱们看View的属性解释。 2、a原创 2017-04-07 14:29:02 · 7320 阅读 · 0 评论 -
react native Button 使用详解
Button其实就是 Touchable(TouchableNativeFeedback、TouchableOpacity)和Text封装而来,下面是Button的部分源码:render() {const { accessibilityLabel, color, onPress, title, disabled,} = this.props;const buttonStyl原创 2017-04-10 10:17:23 · 7543 阅读 · 1 评论 -
react native Text 使用详解
Text 是显示文本的控件,常用属性如下: numberOfLines : 最大行数,当超过时截取文本。 onLongPress:长按回调函数 onPress:点击回调函数Style属性: color:字体颜色 fontFamily:字体 fontSize:字体大小 fontStyle:字体样式 正常(normal)、斜体(italic) lineHei原创 2017-04-12 13:53:33 · 2148 阅读 · 0 评论 -
react native Switch使用详解
Switch:开关控件 主要属性: value:是否打开。默认为false disabled:是否禁用 默认false onTintColor:打开时背景色 thumbTintColor:圆形按钮的背景颜色 tintColor:关闭时的边框颜色(iOS)或者背景颜色(Android)。 onValueChange:value值发生变化时的回调,参数为当前Switc原创 2017-04-18 10:11:45 · 12573 阅读 · 0 评论 -
react native ScrollView 使用详解
ScrollView 是一个滚动控件,当内容显示不全时可以通过滚动显示。属性: View props… :View的所有属性 contentContainerStyle:内容容器的样式,所有的子视图都会包裹在内容容器内。 horizontal:为true时,横向滚动 keyboardDismissMode :用户拖拽滚动视图的时候,是否要隐藏软键盘。 non原创 2017-04-18 15:08:00 · 19696 阅读 · 2 评论 -
react native FlatList 使用详解
高性能的简单列表组件,支持下面这些常用的功能:完全跨平台。支持水平布局模式。行组件显示或隐藏时可配置回调事件。支持单独的头部组件。支持单独的尾部组件。支持自定义行间分隔线。支持下拉刷新。支持上拉加载。如果需要分组/类/区(section),请使用 SectionList属性: ItemSeparatorComponent:分割线组件, ListFooterComponen原创 2017-04-18 16:38:16 · 45339 阅读 · 6 评论 -
react native SectionList 使用详解
SectionList 和FlatList的基本一样,和FlatList一样的地方就不介绍啦。那什么时候使用FlatList,什么时候使用SectionList呢?如果你的列表不需要分组,那么可以使用结构更简单的 FlatList。 在0.43版本中,如果希望section的头部能够吸顶悬浮,请暂时先使用老版的 ListView。下一个版本开始可以支持悬浮的section头部。属性: Se原创 2017-04-19 09:29:07 · 8775 阅读 · 0 评论 -
react native Touchable 系列组件使用详解
Touchable 系列组件包括:TouchableHighlight:点击高亮效果TouchableNativeFeedback:仅限Android平台,在Android设备上,利用原生状态来渲染触摸的反馈TouchableOpacity:透明效果TouchableWithoutFeedback:无任何反馈,为了更好的体验请不要使用此组件特别说明: 这4个组件都只能有1个子节点,如果原创 2017-04-19 15:05:14 · 1209 阅读 · 1 评论 -
react native TextInput 使用详解
TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。 在Android和ios上有一些却别: 1、在安卓上默认有一个底边框,同时会有一些padding:可以在style中设置padding: 0去掉padding,设置underlineColorAndroid=”transparent”去掉底边框。 2、multiline = {true},Android上文本默认会原创 2017-04-24 17:29:54 · 6896 阅读 · 0 评论 -
react native Slider 使用详解
属性: View props… :View的所有属性 disabled:是否禁用 为true时不可滑动 onSlidingComplete:用户结束滑动的时候调用此回调,参数:value onValueChange :在用户拖动滑块的过程中不断调用此回调,参数:value value:滑块的初始值。这个值应该在最小值和最大值之间。默认值是0 step:滑块变化原创 2017-04-26 15:47:05 · 10522 阅读 · 0 评论 -
react native StatusBar 使用详解
StatusBar 是手机顶部的状态条。 属性: animated:状态栏变化时是否使用动画。 hidden:是否隐藏状态栏。 backgroundColor:仅作用于android。 状态栏背景色。 translucent:仅作用于android。 是否透明。 barStyle:状态栏文本的颜色(’default’, ‘light-content’, ‘dark-co原创 2017-05-03 17:21:00 · 17857 阅读 · 0 评论 -
react native DatePickerIOS 使用详解
DatePickerIOS:ios 时间选择器 熟悉: date:选中的日期。 maximumDate:最大日期。选择的日期大于此日期则回到此日期。 minimumDate:最小日期。选择的日期小于此日期则回到此日期。 mode:(‘date’, ‘time’, ‘datetime’) 选择器模式。 minuteInterval:最小间隔。(1, 2, 3, 4, 5,原创 2017-05-03 18:38:49 · 2455 阅读 · 1 评论 -
react native DrawerLayoutAndroid 使用详解
DrawerLayoutAndroid 仅限于android平台。 属性: drawerLockMode: 抽屉锁定模式。 unlocked:默认,抽屉可以通过手势打开和关闭 locked-closed:抽屉关闭并且不可以通过手势打开 locked-open:抽屉打开并且不可以通过手势关闭 drawerPosition:抽屉的位置 Dra原创 2017-05-04 15:19:45 · 1414 阅读 · 0 评论 -
react native Image 使用详解
Image是显示图片的组件。可以加载网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片。本地磁盘上的图片需要在路径前加 ‘file://’。 resizeMode:组件尺寸和图片尺寸不成比例的时候调整图片的大小 cover: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都大于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全覆盖甚至超原创 2017-05-05 11:48:16 · 2012 阅读 · 0 评论 -
react native Modal 使用详解
Modal 是可以覆盖在原生视图上。 属性: animationType:显示和隐藏的动画 slide:从底部弹出 fade:渐隐渐显 none:无 onRequestClose:android 按返回键时回调。 onShow:modal显示时回调。 transparent:背景是否透明,默认为白色。 visible:是否显示。原创 2017-05-08 15:59:30 · 14934 阅读 · 0 评论 -
react native Picker 使用详解
Picker:选择器。 View props:使用View的属性。 onValueChange:选项发生变化时回调,参数:(value,position) selectedValue:默认选中的值 enabled:android 设置为false禁用 mode:android dialog(默认值,对话框)、dropdown(下拉列表) prompt:a原创 2017-05-17 16:52:40 · 10323 阅读 · 0 评论 -
react native ProgressBarAndroid 使用详解
ProgressBarAndroid:android进度条 View props:可以使用View的所有属性 color:进度条颜色 indeterminate:是否要显示一个不确定的进度 progress:当前的进度值(在0到1之间)。 styleAttr:进度条的样式 Horizontal、Small、Large、Inverse、SmallInve原创 2017-05-17 17:32:40 · 2022 阅读 · 0 评论 -
react native RefreshControl 使用详解
RefreshControl 可以用在ScrollView或ListView 的refreshControl属性上,用于下拉刷新。 onRefresh:开始刷新时调用 refreshing:设置为true显示指示器,false:隐藏。 colors(android):指示器颜色,可以多个,循环显示。 progressBackgroundColor(android):指示器背景颜原创 2017-05-22 14:48:29 · 2532 阅读 · 0 评论 -
react native SegmentedControlIOS 使用详解
SegmentedControlIOS 就是ios上的UISegmentedControl组件 View props:View的所有属性 enabled:是否禁用 momentary:true:选中后背景颜色很快消失 onChange:选项发生变化时调用,参数:event onValueChange:选项发生变化时调用,参数:value selectedIndex:原创 2017-05-22 17:27:06 · 2066 阅读 · 3 评论 -
react native TabBarIOS 使用详解
TabBarIOS 仅限于ios平台。 barTintColor:背景颜色 tintColor:选中标签的颜色 unselectedItemTintColor:未选中标签的颜色 translucent:是否半透明TabBarIOS.Item badge:图标右上角显示一个红色的圆圈,中间是数字 onPress:点击回调 selected:是否选中原创 2017-05-23 11:30:41 · 838 阅读 · 0 评论 -
react native ViewPagerAndroid 使用详解
initialPage:初始选中的索引 onPageScroll:拖拽或者滑动时回调 参数:event onPageScrollStateChanged:状态变化时回调。 idle:空闲,没有交互 dragging:正在被拖动 settling:正在结束开头或收尾的动画 onPageSelected:页面发生变化时回调参数:event scr原创 2017-05-23 16:09:47 · 827 阅读 · 0 评论 -
react native ActionSheetIOS 使用详解
ActionSheetIOS 有2个方法: 1、showActionSheetWithOptions(options: Object, callback: Function) options:(字符串数组)按钮的标题(必选) cancelButtonIndex:选项中取消按钮索引 destructiveButtonIndex:选项中删除按钮索引 title:顶部的标题原创 2017-05-23 17:21:56 · 1758 阅读 · 0 评论 -
react native Alert AlertIOS 使用详解
Alert:提示对话框,只有1个方法: static alert(title: ?string,message?: ?string,buttons?: Buttons,options?: Options,type?: AlertType,) title:标题 message:内容 buttons:按钮数组 options(android):其余参数,只有一个参数 ca原创 2017-05-25 15:48:43 · 2653 阅读 · 0 评论 -
react native Animated 使用详解(基础)
我们知道执行一个动画最基本的原理就是调用动画函数改变一个变量值,而这个变量值绑定到控件的属性上,比如透明的、位置等。通过动画函数改变值从而使控件动起来。所以最基本的动画要有2个属性: 变量值(Animated.Value和Animated.ValueXY) 动画类型:timing、spring、decay 我们先看一个最基本的demo,这个demo实现了平移动画/** * Cr原创 2017-05-26 13:57:19 · 3970 阅读 · 0 评论 -
react native AppState 使用详解
AppState:当前app的状态,是在前台还是在后台。active:应用正在前台运行background:正在后台运行inactive:过渡状态,不会在正常的React Native应用中出现属性: addEventListener:添加监听, removeEventListener:删除监听demo:/** * Created by on 2017/5/31. */im原创 2017-05-31 16:29:32 · 3729 阅读 · 0 评论 -
react native AsyncStorage 使用详解
AsyncStorage是异步的、持久化的Key-Value存储系统,对于App来说是全局性的。 getItem(key,(error,result)=>{}):通过key获取值。 setItem(key, value,(error)=>{}):保存 removeItem(key,(error)=>{}):删除 clear((error)=>{}):清除所有数据,不建议使用。原创 2017-06-01 10:27:02 · 3426 阅读 · 1 评论 -
react native 集成现有的Android项目
react native 集成现有的Android项目react native 目前相当的火爆,许多人都想试试,但一般情况下我们都不能从头就开始使用react native,比如项目已经开发到一半了,不能把以前的工作推倒从来,只能继续在当前项目上开发大部分人来说react native经验不足,所以为了不影响项目进度,不会都用react native开发,一部分仍然在用原生开发 改造以前的项目原创 2017-03-23 11:33:55 · 1214 阅读 · 1 评论