MrOnion的专栏

1.前言上一节我们学习了全局的布局动画api——LayoutAnimation，体验到其流畅柔和的动画效果，但有时我们需要实现一些更精细化的动画，或者完成一些组合动画，这时我们可以使用React Native提供的另一个高级动画api——Animated。 Animated使得我们可以非常容易地实现各种各样的动画和交互方式，并且具备极高的性能。Animated旨在以声明的形式来定义动画的输入...

1.前言LayoutAnimation——布局动画，当布局变化时，会自动将组件运动到新的位置上。相较于RequestAnimationFrame，LayoutAnimation可以更方便的实现出“弹性动画”，“缓入缓出”等效果。使用LayoutAnimation的常用方法是调用LayoutAnimation.configureNext方法，然后使用setState设置组件的状态。2...

1.前言动画是移动应用中的一个相当重要的组成部分，一个用户体验良好的应用通常都具有流畅、有意义的动画。类似原生平台，React Native也为我们提供了丰富的动画API：requestAnimationFrame、LayoutAnimation、Animated。requestAnimationFrame:帧动画，是最容易实现的一种动画，通过不断改变组件的state值，从而在视觉上产生...

1.前言上一篇文章介绍封装Android原生模块，今天将介绍如何封装ios原生模块供React native调用。在React Native中，ios平台原生模块是一个实现了RCTBridgeModule协议的Objective-C类，其中RCT是ReaCT的缩写。这里会涉及到一些Objective-C的代码编写，不过不用担心，有一定的ios开发的基础当然更好，如果你之前从未接触使用过Obje...

前言之前我们学习了React Native的部分api，可以看到React Native为我们封装了非常丰富的api，即使如此有时候我们的应用需要进行访问原生平台系统的api接口，但是React Native可能还没有封装相应功能组件或api, 这种情况我们可以自己封装原生平台的组件。本文将介绍对Android原生组件封装，使我们能在React Native中调用原生模块。下面以我们在Andr...

前言上一篇文章介绍React Native系统提供的两个弹出框的api——Alert与AlertIOS，Alert可以在双平台通用，但是只能展示信息量有限功能单一的文本对话框。AlertIOS比Alert稍微丰富一点，可以展示供用户输入的对话框，但只能在iOS中使用。但是如果我们想在Android平台实现带输入框的提示框呢？或者有需求要定制功能更复杂的对话框，如带多选项的对话框？这时我们可以通

前言React Native中提供弹出对话框的api有两个——Alert与AlertIOS，前者在Android平台和IOS平台通用，后者只能适用于IOS平台。既然Alert双平台通用，为何还需要AlertIOS？主要是由于AlertIOS功能更丰富一些。Alert可弹出一个提示对话框，包含对应的标题和信息，该弹出框可以提供一系列的可选按钮（Android中最多三个），点击任何一个按钮都会调用

前言前面三节中介绍的React Native官方提供的api都是双平台通用的api，在React Native中也有一些只在特定平台才能使用的api，官方的命名也很友善，只适用于Android的api通常叫XXXAndroid,同理只使用于iOS的通常叫XXXIOS，例如今天将介绍的ToastAndroid。但也有例外，例如BackHandler，只适用于Android平台，用于返回键处理的api，

前言今天主要介绍React Native中获取定位的api——Geolocation,及控制软键盘相关事件的api——Keyboard这两个模块。GeolocationReact Native 提供自带的定位api——Geolocation获取定位信息及监听位置变化。该定位API遵循web标准。Geolocation方法1 static getCurrentPosition(geo_success:

判断应用的状态是在前台还是后台，以及获取应用是否联网，是wifi或流量连接等这些基本应用信息在APP开发中是十分常见的功能。今天就分别介绍AppState（获取应用状态信息）,NetInfo（获取网络信息）这两个模块。AppStateAppState可以获取当前APP是在前台还是在后台运行，并且当APP的运行状态发生改变的时会收到通知。AppState通常在处理推送通知的时候用来决定内容和对应的行为

Dimensions在React Native中通常使用Dimensions获取屏幕宽高。Dimensions的方法Dimensions的使用很简单，它只提供了两个方法：static set(dims: {[key:string]: any}) 该方法应该只能被原生代码进行调用。 @param {object} dims 一个简单的字符串作为key的对象，包含了需要设置的屏幕宽高信息。sta

前言Realm是一款新兴的针对移动平台设计的数据库，使用简单、跨平台、性能优越功能强大。其官网地址为：https://realm.io/。Realm与sqlite在性能上各有优势，但其更加简单易用，学习成本低。配置1. 安装在项目的根目录下执行cmd命令：npm install --save realm2. 将项目关联realm原生模块库react-native link realm 注意：在A

前言对于存放数据量小且简易的数据我们可以通过AsyncStorage来存储，但对于数据结构复杂、数据量大的数据，我们可以使用移动开发中常用的SQLite来处理。 SQLite是一种轻型的数据库，多用于移动端开发，在原生应用开发中比较常见。使用React Native并没有提供使用sqlite的组件，我们可以通过使用第三方组件react-native-sqlite来使用原生的SQLiteDataba

前言React Native中常用的数据本地化存储的方法有如下几种：AsyncStorage：以键值对的形式存储的轻量存储器，只能存储字符串数据。SQLite：一种轻型的数据库，多用于移动端开发，原生应用开发中比较常见。Realm：新兴的移动端数据存储方法，使用简单、跨平台、性能优越功能强大。本文主要主要介绍第一种——AsyncStorage。AsyncStorage介绍AsyncStora

本文将介绍三个常用的组件Picker、Switch、Slider，它们都是官方提供的，并且均可以在android与ios渲染对应的原生组件。这三个组件的使用很简单，在实战开发中也很常见，因此这里放在一起介绍。Picker选择器Picker选择器，通常可用作下拉菜单，城市选择器等。 其使用方法如下：import React, { Component } from 'react';import {

加载一个在线网页下例是一个最简单的WebView的使用，给定一个url网址，用WebView加载渲染出来。import React, { Component } from 'react';import { WebView } from 'react-native';export default class WebViewSimpleDemo extends Component { rend

我们可以利用官方组件RefreshControl实现下拉刷新功能，但React Native官方没有提供相应的上拉加载的组件，因此在RN中实现上拉加载比下拉刷新要复杂一点。 虽然没有直接提供上拉加载的组件，不过我们仍可以通过FlatList的onEndReached与onEndReachedThreshold属性来实现相应效果。ActivityIndicator这里上拉加载的转圈效果用Activi

RefreshControl是React Native官方提供的下拉刷新组件，用在ScrollView和FlatList内部，为其添加下拉刷新的功能。它是对原生平台下拉刷新组件的一个封装，使用起来比较方便快捷，体验类似Native的下拉刷新组件，但其缺点是不能进行自定义下拉刷新头部，并且只能使用与ScrollView，FlatList这种带有滚动功能的组件之中。 以ScrollView为例，当Sc

react native swiper可以实现广告轮播图和应用引导页的效果。如：安装react-native-swiper是第三方组件，通过nmp来安装。在项目的根目录下，通过输入npm install react-native-swiper --save引入在要使用swiper的页面importimport Swiper from 'react-native-swiper'基本使用方法import

前面介绍了react-navigation的StackNavigator、TabNavigator、DrawerNavigator 的基本使用方法，在实际项目中通常需要嵌套这几种导航方式。下面介绍这几种导航方式的嵌套使用方法。1.StackNavigator与TabNavigator的嵌套使用StackNavigator与TabNavigator嵌套的App有很多，例如淘宝、京东等，下部选项卡导航，

前面我介绍过几个常用的内置组件的使用方法，对于一些较为复杂的需求可能需要写自定义组件来满足，但是有些时候第三方库的组件可以完美的满足相应的需求，没必要自己去实现一套，这时我们不妨利用现有的轮子，方便快捷，省时省事。 首先介绍引入第三方组件的方法。1.引入第三方组件1.1.引入第三方库，进入项目的根目录（即package.json所在目录），输入命令：npm install [第三方库] --sav

react native提供ajax和fetch的网络请求的方式，ajax即XMLHttpRequest (XHR)，是一种传统的网络请求的方式，其配置和调用方式比较混乱，不符合职责分离的原则，基于事件的异步模型的写法，没有采用Promise的fetch简洁。因此本文重点介绍fetch进行网络请求的用法， 关于ajax只介绍其基本使用方法。fetchfetch的基本格式为：fetch(url, fe

每个组件都有自己的生命周期，在其生命周期内，组件经历了初始化-运行-销毁的过程。在运行阶段，每次状态（state）或属性(props)发生变化时，都有对应的组件方法将该变化通知给组件进行渲染刷新（关于state和props的介绍可以看上一节react native学习笔记6——Props和State）。下图是经典的组件生命周期图解（ES6），该图显示了组件在生命周期的各个时期系统调用的方法。下面我们

Props（属性）和State（状态）是React Native中很重要的两个概念。使用Props和State，结合前面学的基本组件如View、Image、 Text、 FlatList等可以实现各种自定义组件、酷炫的UI效果。Props（属性）props是组件中不可变的属性。官网的定义：大多数组件在创建时就可以使用各种参数来进行定制，用于定制的这些参数就称为props。props是在父组件中指定，

目标基础知识的学习只有在实践中使用才更容易被理解与吸收，前面几节都是在介绍基本的属性概念，我自己是一个比较健忘的人，我估计很多人也跟我一样在学了基本概念后过不了多久就忘了，或者只是有个印象却不知道该怎么用该在何处运用这些特性。 本节我们将运用前面所介绍的基本概念，进行布局实战，实现如下效果： 在此之前先介绍一下几个常见的网格布局。网格布局网格布局示例的完整代码在: https://githu

FlexBoxReact Native是采用FlexBox（弹性）布局，使用FlexBox规则来指定某个组件的子元素的布局，FlexBox提供了在不同尺寸设备上都能保持一致的布局方式，它是CSS3弹性框布局规范，因此熟悉前端的同学可能对此感到很亲切，不过React Native的FlexBox与web上的CSS也存在少许差异。 首先是默认值不同：flexDirection的默认值是column而

本文是我整理的各个常用组件的基本使用方法，主要简要几个常见的基本组件，作为入门材料使初学者对RN中的常用组件有个直观的了解，快速入门，加强学习的成就感，增强学习RN的动力，不会面面俱到的详细讲解组件中的各个属性的含义及用法，如需深入了解可以查看官网文档。Demo代码的使用相关的Demo代码可以在https://github.com/mronion0603/ReactNativeExercise下载，

相信配置好rn环境的朋友，在初始化好第一个项目AwesomeProject后会忍不住尝试动手改一改、试一试。下面还是遵循古老传统从hello world开始表演，可以在最初搭建好环境时新建的第一个项目AwesomeProject的基础上，用下面的代码覆盖你的index.ios.js或是index.android.js 文件(在项目的根目录下)，然后运行看看。Hello Worldimport Rea

工欲善其事必先利其器，选择一个趁手的IDE，码起来代码来是事半功倍。 本人由于也是初学RN，对各个前端IDE其实并没多少接触，之前只用过Sublime，对我而言Sublime更像是个文本编辑器，但它确实比较轻便。而本文要介绍的webstorm选择它作为RN的开发工具原因有两个：好多人推荐都推荐, 不过确实挺方便的，自动补全，调试都很方便；与IntelliJ IDEA很像，本人是做Android

本文基本步骤是参考RN中文官网结合自己实际搭建体验而来，由于Chocolatey被墙，所以python2和nodejs直接分别在对应的官方网站下载安装的。 下面正式介绍从零开始搭建react native的Windows开发环境。 首先准备Android的环境，如果你是写Android native的开发者可以直接忽略1，2步直接到第3步。1. 安装Java 的JDK官网地址:ht...