React Native学习（三）-- 初识

1.RN是面向组件开发

2.render()可以理解为一个函数，类似OC中的viewDidLoad()

3.JSX和组件的概念

React 的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM，React利用虚拟DOM来减少对实际DOM的操作从而提升性能。传统的创建方式是：

图片.png

但这样的代码可读性并不好，于是React发明了JSX，利用我们熟悉的HTML语法来创建虚拟DOM：

图片.png

在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript，JSX的语法不会带来任何性能影响。因此，JSX本身并不是什么高深的技术，可以说只是一个比较高级但很直观的语法糖。

4、 View组件中常见的属性

React Native组件View，其作用等同于iOS中的UIView, Android中的android.view，或是网页中的<div>标签，它是所有组件的父组件。

Flexbox 弹性布局

Transforms  动画属性

backfaceVisibility enum('visible', 'hidden')    定义界面翻转的时候是否可见

backgroundColor color

borderBottomColor color

borderBottomLeftRadius number

borderBottomRightRadius number

borderBottomWidth number

borderColor color

borderLeftColor color

borderLeftWidth number

borderRadius number

borderRightColor color

borderRightWidth number

borderStyle enum('solid', 'dotted', 'dashed')

borderTopColor color

borderTopLeftRadius number

borderTopRightRadius number

borderTopWidth number

borderWidth number

opacity number 设置透明度，取值从0-1；

overflow enum('visible', 'hidden')  设置内容超出容器部分是显示还是隐藏；

elevation number 高度   设置Z轴，可产生立体效果。

5、 View组件运用

下图就是View的基本运用：

图片.png

在图中的render函数中，我们返回了一个顶层的View，然后View中包含着另一个子层的View。
在顶层的View中的style属性里面设置了其占满父控件，内边距为30，背景颜色为黄色 ；对应子层中的View的style属性中设置了宽度300，高度50，背景色为红色。 这是我们熟悉的css写法。
运行结果如下：

图片.png

在React Native开发中，更加推荐我们采用StyleSheet来进行组件的布局，这样的话，代码在结构上会更加的清晰、也有利于后期维护。
下面我们采用StyleSheet来实现一下:

图片.png

import React, { Component } from 'react';
import {
  AppRegistry,  // 注册
  StyleSheet, // 样式
  Text,  // 文本组件
  View,   // 视图组件
  Image,
  TextInput
} from 'react-native';

// 继承自Component的类AwesomeProject
export default class AwesomeProject extends Component {
  // 初始化方法  用来返回具体的组件内容
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Hello World!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red',
  },
  welcome: {
    fontSize: 30,
    textAlign: 'center',
    margin: 10,
  }
});

6、Flex布局

之前应用到的界面的搭建都是采用CSS布局，基于盒子模型，依赖 display属性 ， position属性， float属性。但对于那些特殊布局非常不方便，比如，垂直居中。
一种全新的针对web和移动开发布局应运而生：Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

支持FlexBox布局的主流浏览器.png

1）什么是FlexBox
flexible（形容词）：能够伸缩或者很容易变化，以适应外界条件的变化
box（名词）：通用的矩形容器
2）什么是FlexBox布局?
弹性盒模型（The Flexible Box Module）,又叫Flexbox，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。
Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至是顺序），以最佳方式填充可用空间；React native中的FlexBox是这个规范的一个子集。
3）大部分情况下是处理图中FlexItem在FlexContainer中的位置和尺寸关系

图片.png

移动开发中FlexBox布局非常重要

export default class BViewDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        {/*<Text>其实我是存在的</Text>*/}
        <View style={styles.innerViewStyle}>
          <Text>我是里边的View</Text>
        </View>
        <View style={styles.innerViewStyle2}>
          <Text>我是里边下面的View</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    // flex: 1,
    backgroundColor: 'red',
    width: 300,
    height: 100,
    // 改变主轴方向
    flexDirection: 'row-reverse'
  },
  innerViewStyle: {
    backgroundColor: 'green',
    width: 100,
  },
  innerViewStyle2: {
    backgroundColor: 'yellow',
    width: 100,
  },
});

7、Flexbox在开发中的应用场景

（1）Flexbox在布局中能够解决什么问题？
浮动布局
各种机型屏幕的适配
水平和垂直居中
自动分配宽度
......

（2） 在CSS中，常规的布局是基于块和内联流方向，而Flex布局是基于flex-flow流,下图很好解释了Flex布局的思想：

图片.png

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

（3）根据伸缩项目排列方式的不同，主轴和侧轴方向也有所变化：

图片.png

8、Flexbox的常用属性

（1）容器属性
a) flexDirection: row | row-reverse | column | column-reverse
该属性决定主轴的方向（即项目的排列方向）。
row：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column(默认值)：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

图片.png
b）justifyContent:flex-start | flex-end | center | space-between | space-around
定义了伸缩项目在主轴线的对齐方式
flex-start(默认值)：伸缩项目向一行的起始位置靠齐。
flex-end：伸缩项目向一行的结束位置靠齐。
center：伸缩项目向一行的中间位置靠齐。
space-between：两端对齐，项目之间的间隔都相等。
space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。 图片.png

c） alignItems: flex-start | flex-end | center | baseline | stretch
定义项目在交叉轴上如何对齐，可以把其想像成侧轴（垂直于主轴）的“对齐方式”。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐 。
center：交叉轴的中点对齐。
baseline：项目的第一行文字的基线对齐。<strong>在RN中不适用</strong>
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

图片.png

export default class CFlexBoxDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={{backgroundColor: 'red', height: 30}}>第一个</Text>
        <Text style={{backgroundColor: 'green', height: 50}}>第二个</Text>
        <Text style={{backgroundColor: 'yellow', height: 40}}>第三个</Text>
        <Text style={{backgroundColor: 'blue', height: 60}}>第四个</Text>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'purple',
    // 上边距
    marginTop: 25,
    // 改变主轴的方向
    flexDirection: 'row',
    // 设置主轴线的对齐方式
    justifyContent: 'space-between',
    // 设置交叉轴上的对齐方式，该例子中交叉轴是竖直方法
    alignItems: 'flex-start'
  },
});

d) flexWrap: nowrap | wrap | wrap-reverse
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

图片.png

nowrap(默认值)：不换行。

图片.png

wrap：换行，第一行在上方。

图片.png

wrap-reverse：换行，第一行在下方。（和wrap相反）<strong>在RN中不适用</strong>

图片.png

class CFlexBoxDemo2 extends Component {
  render() {
    return (
        <View style={styles2.container}>
          <Text style={{backgroundColor: 'red', width: 80}}>第一个</Text>
          <Text style={{backgroundColor: 'green', width: 90}}>第二个</Text>
          <Text style={{backgroundColor: 'yellow', width: 100}}>第三个</Text>
          <Text style={{backgroundColor: 'blue', width: 110}}>第四个</Text>

        </View>
    );
  }
}

const styles2 = StyleSheet.create({
  container: {
    backgroundColor: 'purple',
    // 上边距
    marginTop: 25,
    // 改变主轴的方向
    flexDirection: 'row',
    // 设置主轴线的对齐方式
    justifyContent: 'flex-start',
    // 设置交叉轴上的对齐方式，该例子中交叉轴是竖直方法
    alignItems: 'flex-start',
    flexWrap: 'wrap'
  },
});

（2）元素属性
a）flex
“flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写， 其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数。
默认值为“0 1 auto”。
宽度 ＝ 弹性宽度 * ( flexGrow / sum( flexGorw ) )

图片.png

b）alignSelf: “auto | flex-start | flex-end | center | baseline | stretch”
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

图片.png

class CFlexBoxDemo3 extends Component {
  render() {
    return (
        <View style={styles3.container}>
          <Text style={{backgroundColor: 'red', flex: 1, height: 60, alignSelf: 'flex-start'}}>第一个</Text>
          <Text style={{backgroundColor: 'green', flex: 2, height: 70, alignSelf: 'flex-end'}}>第二个</Text>
          <Text style={{backgroundColor: 'yellow', flex: 2, height: 80}}>第三个</Text>
          <Text style={{backgroundColor: 'blue', flex: 1, height: 90}}>第四个</Text>

        </View>
    );
  }
}

const styles3 = StyleSheet.create({
  container: {
    backgroundColor: 'purple',
    // 上边距
    marginTop: 25,
    // 改变主轴的方向
    flexDirection: 'row',
    // 设置主轴线的对齐方式
    justifyContent: 'flex-start',
    // 设置交叉轴上的对齐方式，该例子中交叉轴是竖直方法
    alignItems: 'center',
  },
});

9、在React Native中使用Flexbox

(1)获取当前屏幕的宽度、高度、分辨率

// 引入
var Dimensions = require('Dimensions')
class CFlexBoxDemo4 extends Component {
  render() {
    return (
        <View style={styles4.outViewStyle}>
          <Text>当前屏幕的宽度：{Dimensions.get('window').width}</Text>
          <Text>当前屏幕的宽度：{Dimensions.get('window').height}</Text>
          {/*分辨率*/}
          <Text>分辨率：{Dimensions.get('window').scale}</Text>
        </View>
    );
  }
}

const styles4 = StyleSheet.create({
  outViewStyle: {
    // 占满屏幕
    flex: 1,
    // 主轴方向居中
    justifyContent: 'center',
    // 交叉轴方向居中
    alignItems: 'center'
  },
});

图片.png iPhone家族的相关屏幕参数.png