ReactNative之Props（属性）
[TOC]
概述大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。
以常见的基础组件Image为例，在创建一个图片时，可以传入一个名为source的 prop 来指定要显示的图片的地址，以及使用名为style的 prop 来控制其尺寸。
1234567891011121314import React, { Component } from 'react';import { Image } from 'react-native';export default class Bananas extends Component { render() { let pic = { uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' }; return ( <Image ...
ReactNative的调试相关
[TOC]
概述
TouchableNativeFeedback组件学习
[TOC]
概述本组件用于封装视图，使其可以正确响应触摸操作（仅限Android平台）。在Android设备上，这个组件利用原生状态来渲染触摸的反馈。目前它只支持一个单独的View实例作为子节点。在底层实现上，实际会创建一个新的RCTView节点替换当前的子View，并附带一些额外的属性。
原生触摸操作反馈的背景可以使用background属性来自定义。
1234567891011renderButton: function() { return ( <TouchableNativeFeedback onPress={this._onPressButton} background={TouchableNativeFeedback.SelectableBackground()}> <View style={{width: 150, height: 100, backgroundColor: 'red'}}> ...
ReactiveNative之StyleSheet样式
[TOC]
概述在 React Native 中，你并不需要学习什么特殊的语法来定义样式。我们仍然是使用 JavaScript 来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了 web 上的 CSS 的命名，只是按照 JS 的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。
style属性可以是一个普通的 JavaScript 对象。这是最简单的用法，因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。
实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式。比如像下面这样：
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848 ...
彻底理解React组件的生命周期
[TOC]
概述文章学习：https://segmentfault.com/a/1190000013354181
React提供了很多钩子函数使我们可以在合适的时间、合适的节点更新组件的状态，这些钩子是生命周期函数，想要使用React，我们必须掌握在钩子中可以做什么，不可以做什么。
==首先大家想一下在哪里发送请求比较合适componentWillMount、componentDidMount、componentWillReceiveProps、componentDidUpdate?==
就像 Android 开发中的 View 一样，React Native（RN） 中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个React组件从他被React Native框架加载，到最终被React Native框架卸载，会经历一个完整的生命周期。
如图，可以把组件生命周期大致分为三个阶段：
第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；
第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶 ...
ReactNative之State（状态）
[TOC]
概述我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。
一般来说，你需要在 constructor 中初始化state（译注：这是 ES6 的写法，早期的很多 ES5 的例子使用的是 getInitialState 方法来初始化 state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。
假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经指定好了，所以文字内容应该是一个prop。而文字的显示或隐藏的状态（快速的显隐切换就产生了闪烁的效果）则是随着时间变化的，因此这一状态应该写到state中。
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 ...
ReactNative之高度与宽度尺寸定义
[TOC]
概述组件的高度和宽度决定了其在屏幕上显示的尺寸。
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768/** * 这个Demo我们来学习一下设置组价的宽度和高度 * * 组件的高度和宽度决定了其在屏幕上显示的尺寸。 */import React, { Component } from 'react';// 从“react-native” 导入以下这些控件import { Platform, StyleSheet, Text, View, Image } from 'react-native';const instructions = Platform.select({ ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or ...
ReactNative之使用通用滚动视图
[TOC]
概述
ReactNative之处理触摸事件
[TOC]
概述移动应用上的用户交互基本靠“摸”。当然，“摸”也是有各种姿势的：在一个按钮上点击，在一个列表上滑动，或是在一个地图上缩放。React Native 提供了可以处理常见触摸手势（例如点击或滑动）的组件， 以及可用于识别更复杂的手势的完整的手势响应系统。
显示一个简单的按钮Button是一个简单的跨平台的按钮组件。下面是一个最简示例：
123456<Button onPress={() => { Alert.alert("你点击了按钮！"); }} title="点我！"/>
上面这段代码会在 iOS 上渲染一个蓝色的标签状按钮，在 Android 上则会渲染一个蓝色圆角矩形带白字的按钮。点击这个按钮会调用”onPress”函数，具体作用就是显示一个 alert 弹出框。你还可以指定”color”属性来修改按钮的颜色。
再试试下面这个使用Button的例子吧。你可以点击”Tap to Play”来预览真实效果。（下面会显示一个嵌在网页中的手机模拟器，国内用户可能打 ...
RectNative之处理文本输入
[TOC]
概述TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。
最简单的用法就是丢一个TextInput到应用里，然后订阅它的onChangeText事件来读取用户的输入。注意，从TextInput里取值这就是目前唯一的做法！也就是使用在onChangeText中用setState把用户的输入写入到state中，然后在需要取值的地方从this.state中取出值。它还有一些其它的事件，譬如onSubmitEditing和onFocus。一个简单的例子如下：