ネイティブナレッジコンテンツのレイアウト1 - フレキシボックスを反応させます

オリジナル：https://www.cnblogs.com/wujy/p/5841685.html

A：理論的知識

1：フレキシボックスの何であるレイアウトは？

（弾性ボックスモデルフレキシブルボックスモジュールで）としても知られている、意味フレキシボックス、「柔軟なレイアウトは、」最大箱入りモデルを提供し、それは別の画面に適応することができるように弾性的容器の内容物の分布によって空間を位置合わせするように設計さ柔軟性。

Flexのレイアウト主なアイデアは、次のとおりです。最高の利用可能なスペースを埋めるためにそのサブ許さ幅と高さ（偶数次）を変更するコンテナができるようにする機能。

2：フレックスフローストリームに基づいてFlexのレイアウト

デフォルトコンテナは二つの軸が存在する水平スピンドル（主軸）と垂直軸（交差する交差軸を）。スピンドル（境界との交点）の開始位置が呼び出される終了位置と呼ばれる、メイン開始交差軸位置が呼び出された開始、主端を横断開始、終了位置が呼び出される断面端。

主軸に沿って配置されたデフォルトのアイテムは、単一のプロジェクトによって占有スピンドルスペースと呼ばれる交差軸が占めるスペースが呼び出されると、メインサイズを断面サイズ。

メインシャフトとサイドシャフトプロジェクトの方向入れ子配置に応じても変化

3：、で反応があるフレキシボックスコンテナのプロパティの6種類、プロジェクトのプロパティの6種類が。ではネイティブ反応して、そこにある4コンテナ属性は、2つの項目がすなわち、属性：

コンテナプロパティ：flexDirection flexWrap justifyContent alignItems

プロジェクトのプロパティ：フレックスalignSelf

3.1：flexDirection 容器属性： `行| 行リバース| コラム| 列reverse`

これは、主方向（プロジェクトすなわち、配列方向）を決定します。

行：スピンドル水平方向、左端の起点。

行逆スピンドル水平方向、右端の出発点。

カラム（デフォルト値）：垂直方向のスピンドル、エッジ上の出発点。

カラムリバース：垂直方向のスピンドル、低い出発点に沿っ。

3.2：flexWrap 容器属性： `NOWRAP | ラップ| ラップreverse`

デフォルトでは、（としても知られている行の行のすべての項目「軸上」）。フレックスラップラップどのよう未満1、行軸場合、プロパティ定義を。

3.2.1 NOWRAP（デフォルト値）：ラップません

3.2.2 ラップは：最初の行の上、ラップ

逆ラップ3.2.3 ：ラップ、最初の行の下に。（ラップ反して）

3.3:justifyContent容器属性:`flex-start | flex-end | center | space-between | space-around`

定义了伸缩项目在主轴线的对齐方式

flex-start(默认值)：伸缩项目向一行的起始位置靠齐。

flex-end：伸缩项目向一行的结束位置靠齐。

center：伸缩项目向一行的中间位置靠齐。

space-between：两端对齐，项目之间的间隔都相等。

space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。

3.4:alignItems容器属性:`flex-start | flex-end | center | baseline | stretch`

定义项目在交叉轴上如何对齐，可以把其想像成侧轴（垂直于主轴）的“对齐方式”。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline：项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

3.5:flex项目属性:

“flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写，其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数。默认值为“0 1 auto”。

宽度＝弹性宽度 * ( flexGrow / sum( flexGorw ) )

3.6:alignSelf项目属性:

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

二：代码实例：

1：简单布局

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class ReactNativeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
      <View style={styles.viewItem1}>
      </View>
      <View style={styles.viewItem2}>
      </View>
      <View style={styles.viewItem3}>
      </View>
      <View style={{flex:2,backgroundColor:'#bbceee',flexDirection:'row'}}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  viewItem1:{
    flex:1,
    flexDirection:'row',
    height:50,
    backgroundColor:'#FF33CC'
  },
  viewItem2:{
    flex:1,
    flexDirection:'row',
    height:50,
    marginTop:15,
    backgroundColor:'#00FFFF'
  },
  viewItem3:{
    flex:1,
    flexDirection:'row',
    height:50,
    backgroundColor:'#CCBBFF'
  },
});

AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

效果图：

说明：return返回只能是一个对象，所以在最外层包含的一个View,里面放置四个View,并对它们进行布局；

最后一个View的flex属性让它比起其它的权重要大，所以高度会是其它的对应倍数值，上面还分开两种写法，一种是在下面用样式属性编写，另一个是直接在布局里面写样式，注意它们的差别，建议分开写；里面四个子View我们都让它以flexDirection为row方式进行排列；

2:布局属性运用：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class ReactNativeProject extends Component {
  render() {
    return (
      <View style={styles.container}>

      <View style={styles.viewItem1}>
          <View style={{flex:1,height:40,backgroundColor:'red'}}></View>
          <View style={{flex:1,height:40,backgroundColor:'blue',alignSelf:'center'}}></View>
          <View style={{flex:1,height:40,backgroundColor:'red',alignSelf:'flex-end'}}></View>
      </View>

      <View style={styles.viewItem2}>
          <View style={styles.viewItem2Child1}>
          </View>
          <View style={styles.viewItem2Child2}>
          </View>
      </View>

      <View style={styles.viewItem3}>
          <View style={styles.viewItem3Child1}>
          </View>
          <View style={styles.viewItem3Child2}>
          </View>
          <View style={styles.viewItem3Child3}>
          </View>
      </View>

      <View style={{flex:2,backgroundColor:'#bbceee',flexDirection:'row'}}>
          <View style={{flex:1,height:100,flexDirection:'row',justifyContent:'center',marginTop:30}}>
            <View style={{width:100,backgroundColor:'red'}}></View>
            <View style={{width:70,backgroundColor:'blue'}}></View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  viewItem1:{
    flex:1,
    flexDirection:'row',
    height:50,
    backgroundColor:'#FF33CC'
  },
  viewItem2:{
    flex:1,
    flexDirection:'row',
    height:50,
    marginTop:15,
    backgroundColor:'#00FFFF',

    flexWrap:'wrap'
  },
  viewItem2Child1:
  {
    width:200,
    height:30,
    backgroundColor:'green'
  },
  viewItem2Child2:
  {
    width:200,
    height:30,
    backgroundColor:'red'
  },
  viewItem3:{
    flex:1,
    flexDirection:'row',
    height:50,
    backgroundColor:'#CCBBFF'
  },
  viewItem3Child1:{
    flex:1,
    backgroundColor:'#00ffbb'
  },
  viewItem3Child2:{
    flex:1,
    backgroundColor:'#aabbdd'
  },
  viewItem3Child3:
  {
    flex:1,
    backgroundColor:'#0000ff'
  }
});

AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

在实例1的基础上，对其它属性进一步运用；效果图如下：

第一个View包含三个View,主要是实现针对alignSelf属性的运用；

第二个View包含二个View,两个View的宽度之合大于屏幕宽度，主要是实现针对flexWrap属性的运用；

第三个View包含三个View,主要是针对flex的运用

第四个View包含有两个View,主要是针对justifyContent跟属性marginTop的运用；

三：其它知识点：

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

import Dimensions from 'Dimensions';

var { width, height, scale } = Dimensions.get('window');

render() {
  return (
    <View>
      <Text>
        屏幕的宽度：{width + '\n'}
        屏幕的高度：{height + '\n'}
        屏幕的分辨率：{scale + '\n'}
      </Text>
    </View>
  );
}

2：默认宽度

我们都知道块级标签如果不设置宽度，通常都是独占一行的，在React Native中的组件中需要设置flexDirection：'row'，才能在同一行显示，flex的元素如果不设置宽度，都会百分之百的占满父容器。

3：水平、垂直居中

当alignItems、justifyContent传center时与flexDirection的关系：

想理解这个很简单，看我上班讲的alignItems、justifyContent，心里想着主轴和次轴就可以理解，justifyContent是主轴方向居中，而alignItems是次轴方向居中，flexDirection默认为column，所以误区会认为alignItems为水平居中，justifyContent为垂直居中。

4:padding和margin

margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离，下面这张是CSS的效果图，只是名字不一样（marginTop），原理都是一样；

5：关于样式

（1）普通内联样式:{{}},第一层｛｝是表达式，第二层｛｝是js对象；

（2）调用样式表:{样式类.属性}

（3）样式表和内联样式共存:{[]}

（4）多个样式表:{[样式类1，样式类2]}

6：React Native样式属性列表

"alignItems",

"alignSelf",

"backfaceVisibility",

"backgroundColor",

"borderBottomColor",

"borderBottomLeftRadius",

"borderBottomRightRadius",

"borderBottomWidth",

"borderColor",

"borderLeftColor",

"borderLeftWidth",

"borderRadius",

"borderRightColor",

"borderRightWidth",

"borderStyle",

"borderTopColor",

"borderTopLeftRadius",

"borderTopRightRadius",

"borderTopWidth",

"borderWidth",

"bottom",

"color",

"flex",

"flexDirection",

"flexWrap",

"fontFamily",

"fontSize",

"fontStyle",

"fontWeight",

"height",

"justifyContent",

"left",

"letterSpacing",

"lineHeight",

"margin",

"marginBottom",

"marginHorizontal",

"marginLeft",

"marginRight",

"marginTop",

"marginVertical",

"opacity",

"overflow",

"padding",

"paddingBottom",

"paddingHorizontal",

"paddingLeft",

"paddingRight",

"paddingTop",

"paddingVertical",

"position",

"resizeMode",

"right",

"rotation",

"scaleX",

"scaleY",

"shadowColor",

"shadowOffset",

"shadowOpacity",

"shadowRadius",

"textAlign",

"textDecorationColor",

"textDecorationLine",

"textDecorationStyle",

"tintColor",

"top",

"transform",

"transformMatrix",

"translateX",

"translateY",

"width",

"writingDirection"

四：问题

1：当出现下面这张图一般是JS代码出错了，要么是样式或者布局不正确引起；

ネイティブナレッジコンテンツのレイアウト1 - フレキシボックスを反応させます

おすすめ