원본 : https://www.cnblogs.com/wujy/p/5841685.html
A : 이론적 지식
1 인 flexbox의 무엇 레이아웃?
(탄성 박스 모델 탄력 박스 모듈 AT) 라고도 의미 인 flexbox, '유연한 레이아웃 "최대 박스 모델을 제공하는 것이 다른 화면에 적응할 수 있도록 탄성 방식으로 용기의 내용물의 분배에 의해 공간을 맞추도록 설계 유연성을 제공합니다.
플렉스 레이아웃 주요 아이디어는 다음과 같습니다 최저의 공간을 채우기 위해 하위 허용 폭과 높이 (심지어 순서)를 변경하는 용기가 할 수 할 수있는 능력;
2 : 플렉스 흐름 스트림을 기반으로 플렉스 레이아웃
: 기본 컨테이너는 두 축이 존재 수평 축 ( 주축 ) 및 수직 축선 (교차하는 교차 축 ) . 스핀들 (테두리 교차로)의 개시 위치는 호출 종료 위치가 착신 메인 시작 교차 축 위치라고 시작 메인 단부를 종결 위치는 호출 크로스 시작 크로스 끝.
스핀들을 따라 배열 기본 항목, 호출 된 하나의 프로젝트가 차지하는 스핀들 공간 의 주요 크기, 십자가 축이 차지하는 공간이라고 크로스 크기입니다.
신축 장치도 다양 주축 측과 샤프트 프로젝트의 방향에 따라
3 ,으로 반응 이있다 인 flexbox 컨테이너 속성 여섯 종류의 프로젝트 속성 여섯 종류. 에서 기본 반작용, 거기에 4 컨테이너 속성이, 두 항목 즉, 속성 :
컨테이너 속성 : flexDirection flexWrap justifyContent alignItems
프로젝트 속성 : 플렉스 alignSelf
3.1 : flexDirection 容器属性:`행 | 행 역 | 칼럼 | 열 reverse`
이것은 주 방향 (프로젝트 즉, 배치 방향)으로 결정한다.
행 : 스핀들 수평 방향, 왼쪽 끝의 시작점.
로우 리버스 : 스핀들 수평 방향의 오른쪽 끝의 시작점.
컬럼 (기본값 ) 수직 방향의 스핀들 가장자리 시작점.
칼럼 - 후진 : 수직 방향으로 상기 스핀들 하부 시작점을 따라.
3.2 : flexWrap 容器属性:`파라미터 nowrap | 포장 | 랩 reverse`
기본적으로 행 라인에있는 모든 항목 (또한으로 알려진 "축 에서"). 플렉스 랩 속성 정의, 만약 미만, 어떻게 랩 축 행.
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项目属性:
“auto | flex-start | flex-end | center | baseline | stretch”
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对象；
<View style={{fontSize:40, width:80,}}> </View>
（2）调用样式表:{样式类.属性}
<View style={styles.container}></View>
（3）样式表和内联样式共存:{[]}
<View style={[styles.container, {fontSize:40, width:80}]}>
（4）多个样式表:{[样式类1， 样式类2]}
<View style={[styles.container, styles.color]}>
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代码出错了，要么是样式或者布局不正确引起；
