Reactnative Learning Note 1 Flexbox layout

One, proportional attribute flex and layout direction Properties Flexdirection

For example, the Flex property values for three views are 2, 4, 8, respectively, and their height ratio is 2:4:8. , the width is not specified, and the default is full screen width.

class Zlfreactnativedemo extends Component {render () {return (      <view style={styles.container}> <view style={styles.style1}></view> <View style={styles .style2}></view> <view style={styles.style3}></view> </View>    ); }}const Styles=stylesheet.create ({container: {flex:1,
Flexdirection: column , BackgroundColor:' #00FFFF ',}, Style1: {flex:2, BackgroundColor:' Red ',}, Style2: {flex:4, BackgroundColor:' Blue ',}, Style3: {flex:8, BackgroundColor:' Green ',  },});

If you want to change to landscape layout, you only need to change the parent view's property flexdirection to row

Two, the Alignment property alignSelf

alignSelf主要有flex-start（对于纵向布局来说是居上，对于横向布局是居左）、 flex-end（对于纵向布局来说是居下，对于横向布局是居右）、 center（居中）、  auto（自由）、 stretch（铺满）几种对齐方式。

Three justifyContent和alignItems

alignItemsis centered horizontally and justifyContent is vertically centered, unlike other properties, which are constrained by a child view.

 

Reactnative Learning Note 1 Flexbox layout