[深入剖析React Native]React Native Flexbox属性讲解

React 前端之家
前端之家收集整理的这篇文章主要介绍了[深入剖析React Native]React Native Flexbox属性讲解，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

React Native通过一个基于FlexBox的布局引擎，在所有移动平台上实现了一致的跨平台样式和布局方案。

主要属性

  • flex
  • flexDirection
  • alignSelf
  • alignItems
  • justifyContent
  • flexWrap

属性讲解

flex

当一个元素定义了flex属性时，表示该元素是可伸缩的（flex的属性值大于0的时候才可伸缩），可以把它类比成android中的weight属性。

class FlexBoxReact extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.flex_style_1}><Text>占1/6</Text></View>
        <View style={styles.flex_style_2}><Text>占1/3</Text></View>
        <View style={styles.flex_style_3}><Text>占1/2</Text></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,},flex_style_1: {
    flex: 1,backgroundColor: 'red'
  },flex_style_2: {
    flex: 2,backgroundColor: 'white'
  },flex_style_3: {
    flex: 3,backgroundColor: 'blue'
  },});

效果图：

flexDirection

flexDirection在React Native中只有两个属性值，row（横向伸缩）和column（纵向伸缩），默认为column：

class FlexBoxReact extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.flex_style_1}><Text>占1/6</Text></View>
        <View style={styles.flex_style_2}><Text>占1/3</Text></View>
        <View style={styles.flex_style_3}><Text>占1/2</Text></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,flexDirection: 'row',});

上面代码仅仅修改了container样式：

container: { flex: 1,},

效果图：

alignSelf

这个用法跟alignItems的很像，只是它用于单个组件alignSelf的对齐方式,即该属性用来设置单独组件的竖直对齐方式，主要有四种：flex-start、flex-end、center、auto、stretch：

  • flex-start：与父容器首部对齐
  • flex-end：flex-end:与父容器尾部对齐
  • center：位于垂直位置
  • auto：按照自身设置的宽高来显示，如果没设置，效果跟streth一样
  • stretch：垂直拉伸
class FlexBoxReact extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.view, styles.alignSelf_flexstart]}><Text>flex-start</Text></View>
        <View style={[styles.view, styles.alignSelf_flexend]}><Text>flex-end</Text></View>
        <View style={[styles.view, styles.alignSelf_center]}><Text>center</Text></View>
        <View style={[styles.view, styles.alignSelf_auto]}><Text>auto</Text></View>
        <View style={[styles.view, styles.alignSelf_stretch]}><Text>stretch</Text></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,view: {
    flex: 1,backgroundColor: 'red',borderWidth: 1,borderColor: 'blue',alignSelf_flexstart: {
    alignSelf: 'flex-start',alignSelf_flexend: {
    alignSelf: 'flex-end',alignSelf_center: {
    alignSelf: 'center',alignSelf_auto: {
    alignSelf: 'auto',alignSelf_stretch: {
    alignSelf: 'stretch',});

alignItems

用于定义子组件在垂直方向上的对齐方式。有四个属性可设置：flex-start，flex-end，center，stretch。
- flex-start:与父组件在垂直方向上的首部对齐
- flex-end:与父组件在垂直方向上的尾部对齐
- center:处于父容器在垂直方向上的中间位置
- stretch:在垂直方向上填充整个容器

class FlexBoxReact extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.view, styles.alignItems_flexstart]}>
          <Text style={styles.subView}>flex-start</Text>
        </View>
        <View style={[styles.view, styles.alignItems_flexend]}>
          <Text style={styles.subView}>flex-end</Text>
        </View>
        <View style={[styles.view, styles.alignItems_center]}>
          <Text style={styles.subView}>center</Text>
        </View>
        <View style={[styles.view, styles.alignItems_stretch]}>
          <Text style={styles.subView}>stretch</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,subView: {
    width: 100,height: 100,alignItems_flexstart: {
    alignItems: 'flex-start',alignItems_flexend: {
    alignItems: 'flex-end',alignItems_center: {
    alignItems: 'center',alignItems_stretch: {
    alignItems: 'stretch',});

justifyContent

justifyContent和alignItems是相对的。它有五个属性可以设置，分别是flex-start，flex-end，center，space-between，space-around。

  • flex-start:伸缩项目与父容器起始端靠齐
  • flex-end:与父容器结尾端靠齐
  • center:水平居中
  • space-between:第一个子组件位于父容器起始端，最后一个子组件位于父容器结尾端。然后平均分配在父容器水平方向上
  • space-around:所有子组件平均分配在父容器的相应方向上，子组件两端都有留空隙
class FlexBoxReact extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.view, styles.justifyContent_flexstart]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
        </View>
        <View style={[styles.view, styles.justifyContent_flexend]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
        </View>
        <View style={[styles.view, styles.justifyContent_center]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
        </View>
        <View style={[styles.view, styles.justifyContent_between]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
        </View>
        <View style={[styles.view, styles.justifyContent_around]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,flexDirection: 'row',borderColor: 'black',subView: {
    width: 50,height: 50,justifyContent_flexstart: {
    justifyContent: 'flex-start',justifyContent_flexend: {
    justifyContent: 'flex-end',justifyContent_center: {
    justifyContent: 'center',justifyContent_between: {
    justifyContent: 'space-between',justifyContent_around: {
    justifyContent: 'space-around',});

flexWrap

flexWrap用于设置是否可换行，有两个属性可设置nowrap和wrap。

  • nowrap:即使空间不够也不换行，放不下的会冲出溢出屏幕
  • wrap:空间不够的话自动换行
class FlexBoxReact extends Component { render() { return ( <View style={styles.container}> <View style={[styles.view,styles.flexWrap_nowrap]}> <Text style={styles.subView}>Item 1</Text> <Text style={styles.subView}>Item 2</Text> <Text style={styles.subView}>Item 3</Text> <Text style={styles.subView}>Item 4</Text> <Text style={styles.subView}>Item 5</Text> <Text style={styles.subView}>Item 6</Text> </View> <View style={[styles.view,styles.flexWrap_wrap]}> <Text style={styles.subView}>Item 1</Text> <Text style={styles.subView}>Item 2</Text> <Text style={styles.subView}>Item 3</Text> <Text style={styles.subView}>Item 4</Text> <Text style={styles.subView}>Item 5</Text> <Text style={styles.subView}>Item 6</Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,view: { flex: 1,flexDirection: 'row',borderWidth: 1,borderColor: 'black',subView: { width: 80,height: 80,backgroundColor: 'red',borderColor: 'blue',flexWrap_nowrap: { flexWrap: 'nowrap',flexWrap_wrap: { flexWrap: 'wrap',});

转载请标注地址：Geek马走日
Follow个人Github : mazouri

原文链接：https://www.f2er.com/react/306007.html

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作