React Native专题学习
文章平均质量分 50
黔北iOSer
人与人的区别在于性格.好事不喜,坏事不忧,集中精力,专注于事,厚积薄发.
展开
-
React Native开发环境的配置(一)
2015年9月15日, 脸书发布Reactive Native for Android, 到此, React Native现在正式可以支持多平台. 功能如下: HTML5 android iOS多段代码复用;实时热更新现在React Native只能用mac开发,所以想开发这个能你就入手一部吧, 要不就装个黑苹果. 环境配置开始: 1. 安装Homebrew: Homebrew是m原创 2015-11-09 23:14:45 · 1277 阅读 · 0 评论 -
React Native控件之Image组件讲解
React Native控件之Image组件讲解与美团效果实例(一)前言今天我们来讲解一下Image组件,这个组件是非常常用的组件,在每个应用通常都会用到这个组件,所以详细讲解一下。讲解的内容主要有以下几点: 1. Image的基本用法 2. Image属性&方法 3. Image实例-仿照美团首页顶部分类(二)Image基本用法加载项目资源图片加载打包过后APK中图片加载网原创 2016-06-20 16:23:46 · 10196 阅读 · 1 评论 -
React Native控件之ToolbarAndroid工具栏控件讲解以及使用
React Native控件之ToolbarAndroid工具栏控件讲解以及使用(一)前言今天我们来看一下工具栏控件ToolBarAndroid的介绍以使用方法。首先我来介绍一下这个组件,组件功能与iOS平台UINavigationBar类似、与Android平台ToolBar组件类似。(二)ToolbarAndroid简介与官方例子一个ToolBarAndroid组件可以显示Logo图标、some原创 2016-06-26 21:29:03 · 2474 阅读 · 0 评论 -
React Native移植到原生Android项目
React Native移植到原生Android项目(一)前言前面一篇文章讲述了将React Native框架植入到iOS项目中,由于我对iOS开发比较熟悉,所以先对iOS平台的移植做了介绍,这样对于移植这个技术点也要便于学习理解一点。由于React Native版本更新非常,React Native的官方文档都没跟得上React Native项目更新速度,最新版的移植方法现在已经发生了非常大的变化原创 2016-06-05 13:09:40 · 1120 阅读 · 1 评论 -
React Native控件之View视图解析
React Native控件之View视图解析(一)前言这篇文章我们来讲解一下View控件,今天的内容是非常基础,但是是非常有用的东西。特别注意View控件的属性和方法,要记住一些非常常用的属性与方法。(二)View介绍View作为创建UI时候最基础最常用的组件,在react-native中View组件是支持FlexBox布局(FlexBox布局的详细使用讲解)、CSS样式以及相关触摸处理的容器组件原创 2016-06-15 21:16:39 · 7516 阅读 · 0 评论 -
React Native控件之Text组件介绍
React Native控件之Text组件介绍(一)前言前面在讲解View视图的时候,我们使用过Text组件,这篇文章详细的来介绍一下Text组件。(二)基本用法Text组件是React中的一个基本组件,这个和iOS上的UILabel与Android上的TextView组件相类似,就是用来显示文本的,这个空间除了基本的显示布局之外,可以嵌套使用,设置样式,添加事件处理功能。下面我们给出一个简答的例子原创 2016-06-17 13:49:03 · 8351 阅读 · 0 评论 -
React Native控件之Switch与Picker组件讲解
React Native控件之Switch与Picker组件讲解(一)前言这篇文章主要介绍两个简单的组件Switch与Picker组件,这两个组件在实际开发中也是经常用到的。接下来我们来介绍一下这两个控件。(二)Switch组件2.1 Switch组件是Android与iOS平台通用组件,用于开/关两种状态的选择组件。 2.2 Switch属性方法View相关样式属性都别继承过来disable原创 2016-06-27 16:19:36 · 1515 阅读 · 1 评论 -
Flexbox总结
Flexbox总结Flexbox是一种组件布局特性,现在来总结一下Flexbox中有哪些属性可以利用。 名称 values alignItems enum(‘flex-start’,’flex-end’,’center’,’stretch’) alignSelf enum(‘auto’,’flex-start’,’flex-end’,’center’,’stretch’)原创 2016-06-21 10:33:51 · 405 阅读 · 0 评论 -
ShadowPropTypesIOS汇总
ShadowPropTypesIOS汇总ShadowPropTypesIOS是iOS平台上实现阴影效果的组件,有以下四个属性可以使用。 名称 value shadowColor 颜色color shadowOffset {width:number,height:number} shadowOpacity number shadowRadius number原创 2016-06-21 14:40:08 · 396 阅读 · 0 评论 -
Transforms动画汇总
Transforms动画汇总属性分解矩阵(分解矩阵属性类型)转换: [ {perspective(透视度): number}, {rotate(旋转): string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scaleX(缩放X): number}, {scaleY: number}, {tra原创 2016-06-21 15:17:52 · 518 阅读 · 0 评论 -
React Native控件之TextInput组件介绍以及实际登录界面实现
React Native控件之TextInput组件介绍以及实际登录界面实现(一)前言这一篇文章讲解一下文本输入框TextInput组件使用讲解以及模仿实现一下贵州银行登录界面效果。TextInput组件允许用户在应用中通过键盘进行输入文本信息。并且该组件还提供了多种配置属性:自动拼写修复、自动大小写切换、占位默认字符设置以及多种不同类型的键盘切换(数字键盘与字母键盘等之间的切换)。(二)基本使用T原创 2016-06-22 09:57:23 · 12247 阅读 · 2 评论 -
React Native控件之ViewPagerAndroid讲解
React Native控件之ViewPagerAndroid讲解(一)前言这篇文章讲解一下ViewPagerAndroid组件,说到React Native for Android版本中的ViewPagerAndroid组件和Android中的ViewPager控件作用相类似。这个容器允许容器中子视图相互左右滑动。每个ViewPagerAndroid中的子视图都会当做一个单独的页面,并且会撑满整个原创 2016-07-07 23:38:01 · 1493 阅读 · 0 评论 -
React Native控件之Touchable*系列组件详解(28)
React Native控件之Touchable*系列组件详解(一)前言这篇文章带着大家看一下Touchable*系列组件的使用详解,包含四种组件:TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback,最后一个是触摸点击不带反馈效果的,另外三个都是有反馈效果的。因为前面三个是继承自To原创 2016-07-09 00:05:55 · 450 阅读 · 0 评论 -
React Native之Redux使用详解之Actions(29)
React Native之Redux使用详解(29)(一)前言1.1 简要介绍什么是React Native的Redux,其实简单理解就是为FaceBook为React Native应用开发专门开发的一套数据访问规则,其他不多说,这篇文章旨在说明怎么使用。1.2 三个规则1.2.1 单源 整个App的state呗存储在一个对象树中,即 Store。console.log(store.getS原创 2016-07-10 20:54:48 · 6840 阅读 · 0 评论 -
React Native之Redux使用详解之Reducers(30)
React Native之Redux使用详解之Reducers一. ReducersActions 描述发生了什么,但不能指定响应中state怎么变化,这是Reducers的工作。1. 设计State Shape在Redux中,所有state存储为一个单一对象。写任何代码之前考虑好它的 Shape是一个好的注意。对于我们的 todo 应用,我们想去存储两种不同事物:当前所选的可见性过滤器todo原创 2016-08-28 23:25:29 · 4324 阅读 · 0 评论 -
React Native控件之ScrollView组件详解
React Native控件之ScrollView组件详解(一)前言这篇文章我们来讲解一下ScrollView,这个组件是在实际开发过程中用得非常多的,因为移动设备本来就比较小,所以只能通过滚动视图来包含更多的视图。该组件学习相对之前的有一定难度。该组件封装了Android平台的ScrollView控件和iOS平台的UIScrollView控件,并且提供了触摸事件“responder”系统功能。使用原创 2016-06-25 13:11:46 · 11522 阅读 · 0 评论 -
React Native移植到原生iOS平台项目
React Native移植到原生iOS平台项目(一)前言这篇文章主要给大家讲解一下如何在目前现有的纯iOS项目中加入React Native模块,然后在纯iOS项目的基础上使用JS开发项目。React更多的是作为MVC模式中的V视图层存在,所以非常容易嵌入到非React Native开发的应用中。实际上,它可以和常见的工具进行结合,例如CocoaPods点击进入了解.(二)准备工作2.1 安装Co转载 2016-06-04 11:19:04 · 1034 阅读 · 0 评论 -
React Native Mac OS X 开发环境搭建
React Native Mac OS X 开发环境搭建(一)前言FaceBook早期开源发布了React Native For iOS,在2015年9月15日也发布了React Native For Android。虽然Android版本发布比较迟,但是没有阻挡广大前段移动设备开发者的强烈热情。可以这样说,在2015年移动平台有两个技术研究比较火,第一是阿里,百度,腾讯,携程,360等一线互联网公转载 2016-05-31 23:15:46 · 2549 阅读 · 0 评论 -
React Native常用IDE推荐与安装配置
React Native常用IDE推荐与安装配置(一)前言 上一讲提到了React Native框架安装和运行,以及创建了一个项目并介绍这个项目结构。这样介绍项目项目结构其实极其不方便,这一节将介绍开发React Native常用的IDE. 所谓工欲善其事必先利其器,做React Native开发也和其他应用开发一样。现在推荐使用几款比较好的IDE: sublime、webstorm以及官网推荐转载 2016-06-01 11:05:26 · 29956 阅读 · 1 评论 -
React Native进行签名打包Apk
React Native进行签名打包Apk(一)前言前几节课程我们对于React Native的一些基础配置,开发工具以及调试,Android项目移植做了相关讲解,今天学习一下另外一个比较重要的知识点,就是React Native项目签名打包。在React Native For Android应用开发完成之后,那么需要进行发布上传应用市场。在上传之前,有一个很重要的步骤就是签名打包。具体关于Andr转载 2016-06-01 23:55:13 · 1898 阅读 · 0 评论 -
React Native应用设备运行及调试
React Native应用设备运行及调试(一)前言前面的课程我们已经对React Native的环境搭建以及开发的IDE做了相关的讲解,今天我们的主要讲解的是应用设备运行(Running)以及调试方法(Debugging)。本节的前提条件就是大家已经搭建了React Native的相关环境。(二)创建React Native项目需要调试运行应用,首先我们需要使用react-native init转载 2016-06-01 20:16:31 · 11032 阅读 · 0 评论 -
React Native跨平台代码说明
React Native跨平台代码说明(一)前言前面已经介绍了很多关于配置、打包等一系列技术点,接下来我讲介绍一下辅助跨平台代码的几种方式。前面曾经提到过React Native的宗旨是什么?就是Learn once,write everywhere,这句话的意思是学一门语言或技术,可以写不同平台的代码,这其中隐含的意思是在不同平台可能需要分平台编写,这就是这篇文章的目的。比如:在Android与i转载 2016-06-02 10:21:04 · 617 阅读 · 0 评论 -
React Native 版本升级与降级
React Native 版本升级与降级(一)前言现在React Native For Android刚刚开源才不久,现在整体功能还不健全完善以及开发中的坑(Bug)还是比较多的 ,以至于到现在还没有正式版本。项目人员正在加紧开发维护,修复Bug,所以现在React Native项目的版本更新速度还是相对来讲是比较快的。在如此现状之下,我们就要及时关注项目官网了,要将React Native往新版转载 2016-06-02 10:58:53 · 8532 阅读 · 0 评论 -
React Native控件学习之ProgressBarAndroid讲解
React Native控件学习之ProgressBarAndroid讲解(一)前言今天主要来讲解一下ProgressBarAndroid进度条,ProgressBarAndroid是React Native封装了Android平台的ProgressBat控件。这个组件只要用来在App中内容加载进度显示。(二)使用介绍直接上官方代码: <View style={{backgroundColor:'g原创 2016-06-24 12:19:18 · 4500 阅读 · 0 评论 -
React Native控件之ProgressViewIOS进度条组件讲解
React Native控件之ProgressViewIOS进度条组件讲解(一)前言前一篇文章讲解了ProgressViewAndroid进度条加载,这篇文章来介绍一下iOS平台上的进度加载组件。ProgressViewIOS组件是基于iOS平台的UIProgressView组件。(二)属性 名称 value 功能作用 progress number 0-1 之间的值 pr原创 2016-06-24 15:04:23 · 3221 阅读 · 0 评论 -
React Native基础之Linking Libraries 链接库配置-iOS适配开发
React Native基础之Linking Libraries 链接库配置-iOS适配开发(一)前言这一讲来看一下iOS开发中Linking Libraries链接库配置模块详解。在实际开发中,有时候需要第三方库或者其他辅助项目来支持主项目开发,此时,如果把所有的三方库都包含进主项目,主项目会变得非常臃肿。此时,采取一种方案:把互不干扰的功能打包成静态代码库。使用静态库的时候,大多数情况是简单拖拽转载 2016-06-02 19:40:27 · 2307 阅读 · 2 评论 -
React Native之真机调试与离线包方式——iOS开发
React Native之真机调试与离线包方式——iOS开发(一)前言这篇文章讲解以下关于React Native中iOS开发的常见调试方式以及离线包开发方式。做过iOS开发的同学都知道,iOS开发真机调试需要注册苹果开发者账号,自从XCode7之后,iOS开发者不需要付费就可以在真机上调试程序。所以,要真机调试,只需要两步:1. 注册成为苹果开发者;2. 下载XCode7 或者以上版本的IDE.(转载 2016-06-03 15:01:20 · 6884 阅读 · 0 评论 -
React Native 基础之从源代码编译详解-适合Android开发
React Native 基础之从源代码编译详解-适合Android开发(一)前言这篇文章给大家介绍一下从源代码进行编译 React Native模块,这篇文章适合Android模块开发。这篇文章的目的是什么呢?如果你想使用官方最新功能,或者使用官方修复Bug补丁代码,或者去使用官方现在还没有正式发布的新功能以及维护自己的功能代码。那么现在就需要现在这篇文章作为指导,进行编译React Native转载 2016-06-03 17:30:13 · 2367 阅读 · 0 评论 -
React Native控件之DrawerLayoutAndroid抽屉导航组件讲解
React Native控件之DrawerLayoutAndroid抽屉导航组件讲解(一)前言这篇文章主要讲解在Android平台常用的界面结构模式的组件DrawerLayoutAndroid。DrawerLayoutAndroid组件封装了Android平台的DrawerLayout控件,也就是说这个组件只能在Android平台上使用。这个组件实现了抽屉界面(通常用作Android平台的导航页面)原创 2016-06-24 17:29:14 · 1674 阅读 · 0 评论 -
React Native之原生UI组件封装---适配Android
React Native进阶之原生UI组件封装—适配Android(一)前言这篇来介绍一下封装原生UI组件封装给React Native前端进行调用,不过当前文章所讲只是用于Android部分开发,后面会继续更新适配iOS开发的教程。在实际开发App开发中,其实已经有成千上万的原生UI控件通过封装之后,用在App开发中,一些事平台自带,另外一些是第三方库封装的。在React Native中也有很多组转载 2016-06-03 23:52:22 · 3829 阅读 · 3 评论 -
React Native运行官方例子----组件集合
React Native运行官方例子—-组件集合(一)前言(二)下载React Native官方例子React Native项目官方例子源码地址:https://github.com/facebook/react-native,可以通过clone到本地。一般先clone到桌面:cd Desktopgit clone https://github.com/facebook/react-native.g原创 2016-06-09 10:03:55 · 5169 阅读 · 0 评论 -
React Native你需要整理一下
React Native 源码分析要想深入理解 React Native 的工作原理,有两个部分有必要阅读一下,分别是初始化阶段和方法调用阶段。为了提炼出代码的核心含义,我会在不改变代码意图的基础上对它做一些删改,以便阅读。写这篇文章是,React Native 还处于 0.27 版本,由于在 1.0 之前的变动幅度相对较大,因此下面的源码分析很可能随着 React Native 的演变而过时。但不原创 2016-08-29 00:57:27 · 1349 阅读 · 0 评论