2016年06月_黔北iOSer

12月 11月 10月 09月 08月 07月 06月 05月 04月 02月 01月

原创 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

原创 React Native控件之ToolbarAndroid工具栏控件讲解以及使用

React Native控件之ToolbarAndroid工具栏控件讲解以及使用（一）前言今天我们来看一下工具栏控件ToolBarAndroid的介绍以使用方法。首先我来介绍一下这个组件，组件功能与iOS平台UINavigationBar类似、与Android平台ToolBar组件类似。（二）ToolbarAndroid简介与官方例子一个ToolBarAndroid组件可以显示Logo图标、some

2016-06-26 21:29:03 2474

原创 React Native控件之ScrollView组件详解

React Native控件之ScrollView组件详解（一）前言这篇文章我们来讲解一下ScrollView，这个组件是在实际开发过程中用得非常多的，因为移动设备本来就比较小，所以只能通过滚动视图来包含更多的视图。该组件学习相对之前的有一定难度。该组件封装了Android平台的ScrollView控件和iOS平台的UIScrollView控件，并且提供了触摸事件“responder”系统功能。使用

2016-06-25 13:11:46 11522

原创 React Native技术周报一

React Native技术周报一（一）最新资讯1、React Native 0.28正式版发布更新NavigationExperimental，移除PullToRefreshAndroid中的部分方法以及布局中的一些属性调整 2、GMTC全球移动技术大学演讲PPT下载合集，同步更新 GMTC大会正在进行中，有许多关于React Native相关的专题，可以下载PPT学习一下，非常有价值！价

2016-06-25 10:47:02 531

原创 React Native控件之DrawerLayoutAndroid抽屉导航组件讲解

React Native控件之DrawerLayoutAndroid抽屉导航组件讲解（一）前言这篇文章主要讲解在Android平台常用的界面结构模式的组件DrawerLayoutAndroid。DrawerLayoutAndroid组件封装了Android平台的DrawerLayout控件，也就是说这个组件只能在Android平台上使用。这个组件实现了抽屉界面（通常用作Android平台的导航页面）

2016-06-24 17:29:14 1673

原创 React Native控件之ProgressViewIOS进度条组件讲解

React Native控件之ProgressViewIOS进度条组件讲解（一）前言前一篇文章讲解了ProgressViewAndroid进度条加载，这篇文章来介绍一下iOS平台上的进度加载组件。ProgressViewIOS组件是基于iOS平台的UIProgressView组件。（二）属性名称 value 功能作用 progress number 0-1 之间的值 pr

2016-06-24 15:04:23 3221

原创 React Native控件学习之ProgressBarAndroid讲解

React Native控件学习之ProgressBarAndroid讲解（一）前言今天主要来讲解一下ProgressBarAndroid进度条，ProgressBarAndroid是React Native封装了Android平台的ProgressBat控件。这个组件只要用来在App中内容加载进度显示。（二）使用介绍直接上官方代码： <View style={{backgroundColor:'g

2016-06-24 12:19:18 4500

原创 React Native控件之TextInput组件介绍以及实际登录界面实现

React Native控件之TextInput组件介绍以及实际登录界面实现（一）前言这一篇文章讲解一下文本输入框TextInput组件使用讲解以及模仿实现一下贵州银行登录界面效果。TextInput组件允许用户在应用中通过键盘进行输入文本信息。并且该组件还提供了多种配置属性：自动拼写修复、自动大小写切换、占位默认字符设置以及多种不同类型的键盘切换（数字键盘与字母键盘等之间的切换）。（二）基本使用T

2016-06-22 09:57:23 12246 2

原创 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

原创 ShadowPropTypesIOS汇总

ShadowPropTypesIOS汇总ShadowPropTypesIOS是iOS平台上实现阴影效果的组件，有以下四个属性可以使用。名称 value shadowColor 颜色color shadowOffset {width:number,height:number} shadowOpacity number shadowRadius number

2016-06-21 14:40:08 396

原创 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

原创 React Native控件之Image组件讲解

React Native控件之Image组件讲解与美团效果实例（一）前言今天我们来讲解一下Image组件，这个组件是非常常用的组件,在每个应用通常都会用到这个组件，所以详细讲解一下。讲解的内容主要有以下几点： 1. Image的基本用法 2. Image属性&方法 3. Image实例-仿照美团首页顶部分类（二）Image基本用法加载项目资源图片加载打包过后APK中图片加载网

2016-06-20 16:23:46 10195 1

原创 React Native控件之Text组件介绍

React Native控件之Text组件介绍（一）前言前面在讲解View视图的时候，我们使用过Text组件，这篇文章详细的来介绍一下Text组件。（二）基本用法Text组件是React中的一个基本组件，这个和iOS上的UILabel与Android上的TextView组件相类似，就是用来显示文本的，这个空间除了基本的显示布局之外，可以嵌套使用，设置样式，添加事件处理功能。下面我们给出一个简答的例子

2016-06-17 13:49:03 8350

原创 React Native控件之View视图解析

React Native控件之View视图解析（一）前言这篇文章我们来讲解一下View控件，今天的内容是非常基础，但是是非常有用的东西。特别注意View控件的属性和方法，要记住一些非常常用的属性与方法。（二）View介绍View作为创建UI时候最基础最常用的组件，在react-native中View组件是支持FlexBox布局（FlexBox布局的详细使用讲解）、CSS样式以及相关触摸处理的容器组件

2016-06-15 21:16:39 7516

原创 iOS模拟器与真机SDKS路径

模拟器：/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs真机：Applications/Xcode.app/Contents/Developer/Platforms /iPhoneOS.platform/Developer/SDKs

2016-06-12 14:49:06 392

原创 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

原创 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移植到原生iOS平台项目

React Native移植到原生iOS平台项目（一）前言这篇文章主要给大家讲解一下如何在目前现有的纯iOS项目中加入React Native模块，然后在纯iOS项目的基础上使用JS开发项目。React更多的是作为MVC模式中的V视图层存在，所以非常容易嵌入到非React Native开发的应用中。实际上，它可以和常见的工具进行结合，例如CocoaPods点击进入了解.（二）准备工作2.1 安装Co

2016-06-04 11:19:04 1033

转载 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 基础之从源代码编译详解-适合Android开发

React Native 基础之从源代码编译详解-适合Android开发（一）前言这篇文章给大家介绍一下从源代码进行编译 React Native模块，这篇文章适合Android模块开发。这篇文章的目的是什么呢？如果你想使用官方最新功能，或者使用官方修复Bug补丁代码，或者去使用官方现在还没有正式发布的新功能以及维护自己的功能代码。那么现在就需要现在这篇文章作为指导，进行编译React Native

2016-06-03 17:30:13 2365

转载 React Native之真机调试与离线包方式——iOS开发

React Native之真机调试与离线包方式——iOS开发（一）前言这篇文章讲解以下关于React Native中iOS开发的常见调试方式以及离线包开发方式。做过iOS开发的同学都知道，iOS开发真机调试需要注册苹果开发者账号，自从XCode7之后，iOS开发者不需要付费就可以在真机上调试程序。所以，要真机调试，只需要两步：1. 注册成为苹果开发者；2. 下载XCode7 或者以上版本的IDE.（

2016-06-03 15:01:20 6883

转载 React Native基础之Linking Libraries 链接库配置-iOS适配开发

React Native基础之Linking Libraries 链接库配置-iOS适配开发（一）前言这一讲来看一下iOS开发中Linking Libraries链接库配置模块详解。在实际开发中，有时候需要第三方库或者其他辅助项目来支持主项目开发，此时，如果把所有的三方库都包含进主项目，主项目会变得非常臃肿。此时，采取一种方案：把互不干扰的功能打包成静态代码库。使用静态库的时候，大多数情况是简单拖拽

2016-06-02 19:40:27 2303 2

转载 React Native 版本升级与降级

React Native 版本升级与降级（一）前言现在React Native For Android刚刚开源才不久，现在整体功能还不健全完善以及开发中的坑(Bug)还是比较多的，以至于到现在还没有正式版本。项目人员正在加紧开发维护，修复Bug，所以现在React Native项目的版本更新速度还是相对来讲是比较快的。在如此现状之下，我们就要及时关注项目官网了，要将React Native往新版

2016-06-02 10:58:53 8532

转载 React Native跨平台代码说明

React Native跨平台代码说明(一)前言前面已经介绍了很多关于配置、打包等一系列技术点，接下来我讲介绍一下辅助跨平台代码的几种方式。前面曾经提到过React Native的宗旨是什么？就是Learn once，write everywhere，这句话的意思是学一门语言或技术，可以写不同平台的代码，这其中隐含的意思是在不同平台可能需要分平台编写，这就是这篇文章的目的。比如：在Android与i

2016-06-02 10:21:04 617

转载 React Native进行签名打包Apk

React Native进行签名打包Apk（一）前言前几节课程我们对于React Native的一些基础配置，开发工具以及调试，Android项目移植做了相关讲解，今天学习一下另外一个比较重要的知识点，就是React Native项目签名打包。在React Native For Android应用开发完成之后，那么需要进行发布上传应用市场。在上传之前，有一个很重要的步骤就是签名打包。具体关于Andr

2016-06-01 23:55:13 1898

转载 React Native应用设备运行及调试

React Native应用设备运行及调试（一）前言前面的课程我们已经对React Native的环境搭建以及开发的IDE做了相关的讲解，今天我们的主要讲解的是应用设备运行(Running)以及调试方法(Debugging)。本节的前提条件就是大家已经搭建了React Native的相关环境。（二）创建React Native项目需要调试运行应用，首先我们需要使用react-native init

2016-06-01 20:16:31 11032

转载 React Native常用IDE推荐与安装配置

React Native常用IDE推荐与安装配置（一）前言上一讲提到了React Native框架安装和运行,以及创建了一个项目并介绍这个项目结构。这样介绍项目项目结构其实极其不方便，这一节将介绍开发React Native常用的IDE. 所谓工欲善其事必先利其器，做React Native开发也和其他应用开发一样。现在推荐使用几款比较好的IDE: sublime、webstorm以及官网推荐

2016-06-01 11:05:26 29956 1