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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容