React Native
文章平均质量分 95
夕阳下的守望者
我不生产代码,我只是代码的搬运工
展开
-
React Native学习一 - Navigator
React Native的编程思想类似于iOS, 导航栏也使用Navigator作为标识, 类似于Android的ActionBar. 导航栏作为最重要的应用组件之一, 除了处理页面导航功能以外, 还会提供页面栈的管理, 管理页面的跳入和跳出. 本文介绍 Navigator 组件的使用方式.注意! 从RN 0.43版本开始, 官方将停止维护Navigator,建议大家迁移到新的Navi转载 2017-04-13 16:31:26 · 476 阅读 · 0 评论 -
React Native高阶组件(HOC)模型理论与实践
什么是HOC?HOC(全称Higher-order component)是一种React的进阶使用方法,主要还是为了便于组件的复用。HOC就是一个方法,获取一个组件,返回一个更高级的组件。什么时候使用HOC?在React开发过程中,发现有很多情况下,组件需要被"增强",比如说给组件添加或者修改一些特定的props,一些权限的管理,或者一些其他的优化之类的。而如果这个功能是针对多个组件的...原创 2018-07-20 15:51:41 · 2103 阅读 · 0 评论 -
React Native学习九- SwipeableFlatList
React-Native 0.50+ 新添加SwipeableFlatList组件,SwipeableFlatList是在FlatList基础上添加了侧滑显示菜单的功能,类似于侧滑删除效果。它有FlatList所有的属性和方法,另外它还有三个自己的属性:1. bounceFirstRowOnMount: bool 是一个bool属性,默认是YES,表示第一次是否先滑一下FlatList的Item2...原创 2018-05-04 15:13:18 · 1578 阅读 · 0 评论 -
React Native学习八- WebView
创建一个原生的WebView,可以用于访问一个网页。截图属性iosallowsInlineMediaPlayback bool #指定HTML5视频是在网页当前位置播放还是使用原生的全屏播放器播放。 默认值为false。注意 : 要让视频在网页中播放,不光要将这个属性设为true,HTML中的视频元素本身也需要包含webkit-playsin原创 2017-05-10 13:39:53 · 968 阅读 · 0 评论 -
React Native学习七- button
一个简单的跨平台的按钮组件。可以进行一些简单的定制。如果这个组件外观并不怎么搭配你的设计,那你可以使用TouchableOpacity或是TouchableNativeFeedback组件来制作自己所需要的按钮,视频教程如何制作一个按钮讲述了完整的过程。或者你也可以在github.com网站上搜索'react native button'来看看社区其他人的作品。用法示例原创 2017-05-08 17:40:32 · 588 阅读 · 0 评论 -
React Native学习四 - TextInput
TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等。最简单的用法就是丢一个TextInput到应用里,然后订阅它的onChangeText事件来读取用户的输入。注意,从TextInput里取值这就是目前唯一的做法!即使用onChangeText写入state,然原创 2017-04-25 15:44:51 · 1974 阅读 · 0 评论 -
React Native学习六- ActivityIndicator
显示一个圆形的loading提示符号。属性View props... #animating bool #是否要显示指示器,默认为true,表示显示。color string #滚轮的前景颜色(默认为灰色)。ioshidesWhenStopped bool #在没有动画的时候,是否原创 2017-05-05 17:16:13 · 937 阅读 · 0 评论 -
React Native学习三 - Text
一个用于显示文本的React组件,并且它也支持嵌套、样式,以及触摸处理。在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加了它自己额外的样式。标题和文本会在顶部依次堆叠,并且被代码中内嵌的换行符分隔开。renderText: function() { return ( Text style={styles原创 2017-04-21 14:25:56 · 1088 阅读 · 0 评论 -
React Native学习五- FlatList
高性能的简单列表组件,支持下面这些常用的功能:完全跨平台。支持水平布局模式。行组件显示或隐藏时可配置回调事件。支持单独的头部组件。支持单独的尾部组件。支持自定义行间分隔线。支持下拉刷新。支持上拉加载。支持跳转到指定行(ScrollToIndex)。如果需要分组/类/区(section),请使用。一个最简单的例子:FlatList data={[{key: 'a'原创 2017-05-03 15:38:55 · 12298 阅读 · 5 评论 -
React Native常用第三方组件
React Native 项目常用第三方组件汇总:react-native-animatable 动画react-native-carousel 轮播react-native-looped-carousel 双向循环播放react-native-countdown 倒计时react-native-device-info 设备信息react-native-fileupload原创 2017-04-12 14:28:00 · 1791 阅读 · 0 评论 -
React Native学习二 - Image
静态图片资源从0.14版本开始,React Native提供了一个统一的方式来管理iOS和Android应用中的图片。要往App中添加一个静态图片,只需把图片文件放在代码文件夹中某处,然后像下面这样去引用它:Image source={require('./my-icon.png')} />图片文件的查找会和JS模块的查找方式一样。在上面的这个例子里,是哪个组件引用了这原创 2017-04-18 14:05:28 · 441 阅读 · 0 评论 -
React Native学习 - 加入redux
这是非常简单的一个项目, 就是一个计数器, 只有两个文件package.json和index.ios.js, 点击加1按钮数字值就会+1, 点击减1按钮数字值就会-1, 点击归零按钮则数字值置为0;index.ios.js代码:import React, { Component } from 'react';import { AppRegistry, StyleShe...原创 2018-08-02 16:43:19 · 300 阅读 · 0 评论