开发过程中, 几乎每个项目都会用到图片. RN就是通过Image组件显示图片.既可以加载网络图片,也可以加载本地资源图片. Image组件必须在样式中声明图片的款和高.如果没有声明,则图片将不会被呈现在界面上. 网络图片加载 加载网络图片非常简单, 直接上代码: 修改index.ios.js或者inde.android.js import React, { Component } from 'react'; import { AppRegistry, StyleSheet, View, Imag…

一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期.所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键. ES6语法和之前的ES5语法有所变化,本篇文章是根据ES6语法写的. 在ES5语法中,有getDefaultPropTypes这个函数,这个函数在组件被创建时,调用一次,它的返回值成为了this.props的初始值. 而ES6语法中,属性的类型和默认值声明不像ES5语法那样在组件定义内部声明,而是在组件定义的外部声明,所以…

TextInput 组件是用来通过键盘输入文字,可以使用View组件和Text组件样式,没有自己特定的样式. 与Text组件类似,TextInput组件内部的元素不再使用FlexBox布局,而采用文本布局.详情见上一篇文章从零学React Native之10Text TextInput属性 只列出了一些常用的,详情见官网 属性名 描述 defaultValue 字符类型,定义TextInput组件中的字符串默认值 autoCorrect 布尔类型,是否自动更正用户输入,默认是true autoF…

之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 本篇主要介绍页面导航 上一篇文章给大家介绍了简单界面的搭建, 这一篇我们需要两个界面, 一个是注册界面,一个是注册信息界面. 当然我们还需要一个组件去控制两个界面的切换. 每个界面其实就一个组件 , 可以通过下面的代码抽取相关的模块 module.exports=RegisterLeaf; 注册界面的代码: 主要代码 import…

本篇文章首发于简书 欢迎关注 之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 本篇文章主要介绍下下面的知识: 1.简单界面的搭建 2.状态机添加 3.渲染框架简介 4.语法简化 搭建界面 之前我们介绍了如何创建一个应用,现在我们来开发一个简单的注册界面.注释都写在代码里了, 如下: 进入项目目录下,修改下index.android.js(开发IOS程序修改index.ios.js) import React, { Comp…

数据持久化就是指应用程序将某些数据存储在手机存储空间中. 借助native存储 这种方式不言而喻,就是把内容传递给native层,通过原生API存储,详见从零学React Native之05混合开发 AsyncStorage API RN框架为开发者提供了 AsyncStorage API,开发者可以利用它将任意"字符串键值对"保存到存储空间中. 它是简单的,异步的.用它可以取代Android的sharedperference和ios的NSUserDefault. AsyncStora…

本篇主要介绍: 1. 自定义组件 2. Alert 对话框 自定义对话框 之前的我都是利用React Native提供的基础组件对它们进行排列组合, 其实自定义也很简单, 我们还是拿上一篇文章的例子进行扩展. 当我们点击注册的时候,可以弹出一个对话框,让用户确认一下,如下图: 接下来就来试试, 首先在项目目录下创建ConfirmDialog.js 代码如下: import React, { Component } from 'react';import { StyleSheet, Text, /…

在React Native开发中,所有需要显示的字符串文本都需要放置在Text或者Text的子组件中.虽然在之前的文章中多次使用了Text组件,但是Text组件还是值得专门学习的, 并没有想象中的那么简单. 任何一个组件,都有样式和属性,样式一般约束控件的样式和位置,定义在style属性中.属性就是直接声明在控件上. Text样式 Text组件支持View的所有样式键.但是需要注意的是,Text内部的元素不再使用flexBox布局,而是采用文本布局. 这意味着Text组件内部的元素不再是一个个的…

View 组件是React Native最基本的组件.绝大部分其他React Native 组件. View组件的颜色和边框 backgroundColor 键用来指定颜色. RN 0.19版本开始,只有Text和TextInput组件会继承父组件的背景颜色 Opacity键定义了View组件的透明度, 取值0-1, 0表示完全透明 borderStyle键用来设置边框的风格,只能取值solid, dotted和dashed三个值之一,分别表示实线边框,点状边框和虚线边框, 默认值是solid…

前面我们接触了好多React Native代码, 并没有介绍RN中的组件具体是如何布局的,这一篇文章,重点介绍下flexbox布局. 什么是flexbox布局 React中引入了flexbox概念,flexbox是属于web前端领域CSS的一种布局方案,是2009年W3C提出了一种新的布局方案,可以简便.完整.响应式地实现各种页面布局.你可以简单的理解为flexbox是CSS领域类似Android中 LinearLayout的一种布局,但是要比 LinearLayout要强大的多. React…