React Native v0.55 学习笔记1

学习内容来自官网文档0.55版本

RN 是基于 React 的思想，相比于 web 的一些组件，RN 使用的是基于原生（ android、ios ）的组件。所以想用 RN 开发应用的话，就需要了解一些 React 方面的概念。例如 JSX，component，state 和 props。

Hello World

RN 使用的是 JavaScript ，支持 ES6 的语法，官方文档中的示例大量使用了 ES6 的新特性。
在 UI 方面则是主要使用 JSX ——一种可以在 XML 标签中包裹 js 语句的语法。RN 内置很多标签，也支持自定义标签。
Component 一个完整的应用必然是由许多个 component 组成的。一个 component 可以非常的简单，唯一需要做的事情就是实现 render函数，这个函数用来返回 JSX 用以渲染 UI.

Props

大多数的 component 都会通过不同的参数来实现自定义的不同功能，这些参数就被称为 props

例如 RN 中的 Image标签，其中 source这个属性就是用来控制图片源的。

import React, { Component } from 'react';
import { AppRegistry, 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 source={pic} style={{width: 193, height: 110}}/>);}
}// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => Bananas);

JSX 语法中，标签内部，使用一对花括号{}内容可以是 js 的表达式。
使用 this.props在自定义的component的render方法中可以获取外部传入的参数，见下面的代码块。
下面的例子中，使用到了自定义component，在 JSX 中像内置的标签一样使用。
View是一个非常常用容器标签，也是最基本的 UI 控件之一，支持flexbox布局、style、触摸事件处理以及无障碍功能处理。

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';class Greeting extends Component {render() {return (<Text>Hello {this.props.name}!</Text>);}
}export default class LotsOfGreetings extends Component {render() {return (<View style={{alignItems: 'center'}}><Greeting name='Rexxar' /><Greeting name='Jaina' /><Greeting name='Valeera' /></View>);}
}// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);

State

props和state是控制component的两种数据类型。前者由父类或者外部传入，在整个控件的生命周期中是固定不变的；后者则是用于一些有变化的数据

通常来说，在constructor方法中初始化state。
通常来说，使用this.setState()方法来改变state的值。

import React,{Component} from 'react';
import {Text,Image,View} from 'react-native';class Greeting extends Component{constructor(props){super(props);this.state = {isShowingText:true};setInterval(()=>{this.setState(previousState=>{return { isShowingText: !previousState.isShowingText };})},1000);}render() {let disPlay = this.state.isShowingText ? this.props.name : ' ';return (<Text style={{color:'#045d51'}}>{disPlay}</Text>);}
}export default class HelloWorldApp extends Component{render(){return(<View style={{alignItems:'center'}}><Greeting name='liu'/><Greeting name='liulin'/><Greeting name='liuru'/></View>);}
}

实际使用中，很少有直接使用定时器来改变state的状态，而是跟踪数据流的变动。可以使用像Redux类似的状态容器来控制数据流，上面的例子中，可以使用Redux来改变state而不是直接调用setState方法。
当setState方法被调用时，标签所在的component会被重新渲染。这块的工作机制和React.js是一致的（暂时还没有去了解）。

Style

在 RN 中，使用 JS 的方式来定义组件的样式。所有的核心组件都支持名为style的属性，样式的属性名和属性值基本与 web 下 css 一致，只不过命名方式变成了驼峰式。
style的属性可以是一个简单的 JS 对象，可以传入一个对象数组，对象数组中的对象如果有属性重复，以最后一个同名属性为准，这样也是实现了样式的继承。
建议使用StyleSheet.create({})的方式来构建复用性比较高的样式对象。

export default class HelloWorldApp extends Component{render(){return(<View style={{alignItems:'center'}}><Text style={styles.red}>just Red</Text><Text style={styles.bigBlue}>just blue</Text><Text style={[styles.bigBlue,styles.red]}>bigBlue,then red</Text><Text style={[styles.red,styles.bigBlue]}>red,then bigBlue</Text></View>);}
}
const styles = StyleSheet.create({bigBlue:{color:'blue', fontWeight:'bold', fontSize:30},red:{color:'red'}
});

宽高

height和width分别表示控件的高度和宽度，需要注意到的是，宽度和高度的单位是与设备实际像素宽高无关的逻辑像素点（感觉类似 Android 中的 dp 和 sp 的感觉，具体的换算还需要研究）。
直接设置宽高的值，会使得控件在不同尺寸的屏幕上展示相同的大小。

<View><View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /><View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} /><View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} /></View>

除了指定具体数值的方式外，宽高还可以弹性指定，利用flex这个属性，这个属性的属性值为数字，表示在允许的范围内，按照flex的值的比例动态设置宽高，类比于 Android 中LinearLayout的layout_weight属性。但是需要注意的是，子控件使用flex属性且生效的前提是，父控件的宽高不为0，否则是不可见的。

<View style={{flex:1}}><View style={{flex:1,backgroundColor:'powderblue'}}/><View style={{flex:2,backgroundColor:'skyblue'}}/><View style={{flex:3,backgroundColor:'steelblue'}}/></View>

基本布局 FlexBox

使用FlexBox进行布局，使用flexbox的策略可以指定一个容器内部子控件的布局方式，有三种基本的布局样式，flexDirection和alignItems和justifyContent。

Flex Direction
在component的style属性中添加flexDirection属性是确定子控件布局的坐标轴主轴是哪个。可选属性值有四个，row、row-reverse、column（默认选项）和column-reverse。

如何理解坐标轴主轴
row代表的是x轴，即子控件在x轴方向上按照布局顺序从左到右顺序布局，x轴的方向是左右方向，所以展示效果上来看，就是水平布局（horizontal）
column代表的是y轴，即子控件在y轴方向上按照布局顺序从上到下顺序布局，y轴的方向是上下方向，所以展示效果是纵向布局（vertical）

<View><View style={{height:200,flexDirection:'row'}}><View style={{flex:1,backgroundColor:'powderblue'}}/><View style={{flex:2,backgroundColor:'skyblue'}}/><View style={{flex:3,backgroundColor:'steelblue'}}/></View><View style={{height:200,flexDirection:'column'}}><View style={{flex:3,backgroundColor:'powderblue'}}/><View style={{flex:2,backgroundColor:'skyblue'}}/><View style={{flex:1,backgroundColor:'steelblue'}}/></View></View>

row-reverse和column-reverse则是颠倒了主轴方向，这个方向指的是布局绘制方向，以row举例默认状态下是从左侧开始，从左到右顺序绘制，加上-reverse后，变成了从右侧开始，从右到左顺序绘制，并且justifyContent的属性值的含义也随着坐标轴方向的变化而取反了。

<View style={{height:100,flexDirection:'row',justifyContent:'flex-start',alignItems:'center',backgroundColor:'#878787'}}><View style={[styles.hw50,{backgroundColor:'#0bffd3'}]}/><View style={[styles.hw50,{backgroundColor:'powderblue'}]}/><View style={[styles.hw50,{backgroundColor:'skyblue'}]}/><View style={[styles.hw50,{backgroundColor:'steelblue'}]}/></View><View style={{height:20}}/><View style={{height:100,flexDirection:'row-reverse',justifyContent:'flex-end',alignItems:'center',backgroundColor:'#878787'}}><View style={[styles.hw50,{backgroundColor:'#0bffd3'}]}/><View style={[styles.hw50,{backgroundColor:'powderblue'}]}/><View style={[styles.hw50,{backgroundColor:'skyblue'}]}/><View style={[styles.hw50,{backgroundColor:'steelblue'}]}/></View>

Justify Content
在component的style属性中添加justifyContent属性是确定子控件在布局坐标轴主轴上的布局方式是哪个。可以选属性值有六个。需要特别注意的是，这个属性作用于所有子控件，即需要将所有子控件作为一个整体来看。
1. flex-start沿着主轴起始方向布局，等同于 Android RelativeLayout中的layout_alignParentStart，即当flex:row时，等同于layout_alignParentLeft，当flex:column时，等同于layout_alignParentTop;
2. flex-end沿着主轴尾部方向布局，等同于 Android RelativeLayout中的layout_alignParentEnd，即当flex:row时，等同于layout_alignParentRight，当flex:column时，等同于layout_alignParentBottom;
3. center沿着主轴整体居中排列；
4. space-around`沿着主轴居中、分散排列，即将宽度或者高度均分为子控件数量的小块，在每个小块内，居中展示子控件。
5. space-between、space-evenly类似space-around,但是展示方式略有不同。下面图片的顺序分别是space-around->space-between->space-evenly，主轴为x轴（flexDirection:'row'）
Align Items
在component的style属性中添加alignItems属性是确定子控件在坐标轴副轴上的展示关系，主要属性有flex-start``center``flex-end和streth。
1. 需要注意的是，设置streth属性，需要保证副轴上的尺寸不允许有具体数值，否则不会有效果
2. flex-start``center``flex-end这三个属性值与justifyContent使用方式一致，只不过作用轴相反。

下图分别是flexDirection、justifyContent和alignItems三个布局属性相互影响的结果。

布局代码如下（按照图片中布局顺序）
主轴是x轴，即按照水平排列子控件，受到属性justifyContent的值的影响；副轴是y轴，受到属性alignItems的值的影响。

<View style={{height:100,flexDirection:'row',justifyContent:'flex-end',alignItems:'flex-end',backgroundColor:'#878787'}}>

<View style={{height:100,flexDirection:'row',justifyContent:'flex-start',alignItems:'flex-end',backgroundColor:'#878787'}}>

<View style={{height:100,flexDirection:'row',justifyContent:'center',alignItems:'flex-start',backgroundColor:'#878787'}}>

stretch属性值表示拉伸的意思，即在副轴方向上根据父控件在副轴上的尺寸对子控件进行拉伸。

AlignSelf
在子component的style属性中添加alignSelf属性可以覆盖父控件的style中的alignItems在当前控件上的作用效果，即重新确定当前的控件在父控件中副轴上的位置。

布局代码如下

<View style={{height:100,flexDirection:'row',justifyContent:'flex-end',alignItems:'flex-end',backgroundColor:'#878787'}}><View style={[styles.hw50,{backgroundColor:'#0bffd3'},{alignSelf:'center'}]}/><View style={[styles.hw50,{backgroundColor:'powderblue'},{alignSelf:'flex-start'}]}/><View style={[styles.hw50,{backgroundColor:'skyblue'}]}/><View style={[styles.hw50,{backgroundColor:'steelblue'}]}/></View>

padding paddingLeft paddingTop paddingRight paddingBottom，值都是number类型，类比 Android 中的 padding paddingLeft paddingTop paddingRight paddingBottom。
margin marginLeft marginTop marginRight marginBottom同上，类比 Android 中的相关属性及用法。

React Native v0.55 学习笔记1相关推荐

React Native跨平台开发学习笔记
App的分类(按开发方式) 大致可以分为这3种: native app(原生app:ios或安卓)原生应用程序原生应用程序外观和运行起来(性能)是最佳的.可以访问本地资源,开法成本高.发布审核周期长 ...
ReactNative v0.55学习笔记
1)react-native夜神模拟器调试链接方法 cmd命令,运行adb connect 127.0.0.1:62001 链接模拟器 adb devices查看链接的设备 2)测试项目要用到rea ...
React Native小白入门学习路径——五
React Native小白入门学习路径--五序 "哦天呐!" 这句话成了我在实验室的口头禅, 老师可能觉得我们都是大神吧,都还在看着基础就给布置了那么多任务:写一个RN的TDD ...
React-Native（五）：React Native之Text学习
本章节主要学习Text的布局,仿照网易新网: 代码: 1 /** 2 * Sample React Native App 3 * https://github.com/facebook/react-n ...
react取消捕获_React学习笔记（三）
React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处理(16.3之后) 初始化 ...
《深入react技术栈》学习笔记（一）初入React世界
前言以<深入学习react技术栈>为线索,记录下学习React的重要知识内容.本系列文章没有涵盖全部的react知识内容,只是记录下了学习之路上的重要知识点,一方面是自己的总结,同时拿出 ...
React官方文档学习笔记（二）
深入 JSX 在运行时选择类型错误 import React from 'react'; import { PhotoStory, VideoStory } from './stories';con ...
react简书项目学习笔记38如何拿到页面的输入值
通过ref属性把输入值存起来,然后在函数中传参 //存值<Input placeholder='密码' type='password' ref={(input) => { this.pas ...
React Native项目案例学习
1.积分猫 https://blog.csdn.net/liu__520/article/details/52889950?utm_source=itdadao&utm_medium=refe ...

React Native v0.55 学习笔记1

React Native v0.55 学习笔记1

Hello World

Props

State

Style

宽高

基本布局 FlexBox

React Native v0.55 学习笔记1相关推荐

最新文章

热门文章