From the Web mobile-side layout to the react native layout

On the web mobile side there is usually the need to implement the upper and lower three column layout (fixed the upper and lower navigation bar position, the middle content beyond the scrollable), as shown in:

The implementation method is as follows:

HTML structure:

<Divclass= ' container '>    <Divclass= ' header '></Div>    <Divclass= ' content '></Div>    <Divclass= ' Footer '></Div></Div>

The first is to use fixed or absolute positioning to achieve simplicity.

Now introduce another method--using-wekkit-box/flex, to achieve the upper and lower column fixed height, the middle height adaptive layout.

The CSS code is as follows:

Using-webkit-box:

. Container{width:100%;Height:100%;Display:-webkit-box;-webkit-box-orient:Vertical;}. Header{Height:200px;Background-color:Red;}. Content{-webkit-box-flex:1;Overflow:Auto;}. Footer{Height:200px;Background-color:Blue; }

Using Flex:

. Container{width:100%;Height:100%;Display:Flex;flex-direction:column;}. Header{Height:200px;Background-color:Red;}. Content{Flex:1;Overflow:Auto;}. Footer{Height:200px;Background-color:Blue;}

The actual application should be put together to write the above two, here just for the following and the new and old two ways to separate.

In react native, the implementation style is just a small subset of the CSS, which uses the flex layout

The idea of implementation is the same as above, but due to the view component in react native, the overflow property has only ' visible ' and ' hidden ' two values (by default, ' hidden '), and there are no scrollable properties . So the intermediate Content section needs to use "ScrollView" to scroll the container

Component rendering:

render () {  return(    <view style={styles.container}>        <view style={ styles.header}></view>        <scrollview style={styles.content}>        </ScrollView>        < View style={styles.footer}></view>    </View>  );}        

Style:

Const STYLES = stylesheet.create ({  container: {  1,
Flexdirection: ' column '  },  header: {      ,      ' Red ',  },  content: {       1,  },  footer: {      ,      ' Blue ',  }});

Effect:

The most basic layout of react native is realized.

Because the layout method of the react native is basically the two kinds: Flex and absolute Layout, mastered the flex layout, also basically done.

From the Web mobile-side layout to the react native layout