React-native layout of controls

Nodejs once the front-end JS pushed to the server side, and the 15 FB react-native RN again to push JS to the mobile side of the development wave. The advantages of Rn are not repeated here, it is that we are accustomed to the server, web-side development, and do not want to spend too much time mastering the Android, iOS Mobile-native development of the people's Gospel, can be said to be our full stack of Engineers quick Shortcut! So recently began to learn react-native, and will learn some of the bits recorded.

On the internet about RN a lot of information, the first is the environment configuration, not necessarily under the Mac. I am based on Windows development, under the Windows environment How to configure you can refer to this article under the Windows RN environment collocation. When the development environment is ready, the specific development knowledge is learned. The first is the RN control study, here we first learn the control layout of Rn.

The layout of Rn is based on the Css+flexbox layout method. We initialize a project named Reactnative with a command, with the following command: React-native init reactnative. After the wait is complete, we open the project with Webstorm and insert the following code into the Index.android.js file in the project:

1Import React, {Component} from ' React ';2 Import {3 Appregistry,4 StyleSheet,5 Text,6 View7} from ' React-native ';8 9 varAPP =React.createclass ({TenRenderfunction () { One         return ( A<view style={styles.main}> -<view style={styles.view1}> -<text style={styles.text}>test1</text> the<text style={styles.text}>test2</text> -<text style={styles.text}>test3</text> -</View> -<view style={styles.view2}> +<text style={styles.text}>test4</text> -<text style={styles.text}>test5</text> +<text style={styles.text}>test6</text> A<text style={styles.text}>test7</text> at<text style={styles.text}>test8</text> -<text style={styles.text}>test9</text> -<text style={styles.text}>test10</text> -</View> -</View> -         ); in     } - }) to varStyles =stylesheet.create ({ + Main: { -Flex:1, bordercolor: ' Blue ', Margin:5, borderwidth:1 the     }, * View1: { $BorderColor: ' Red ', Borderwidth:1, flexdirection: ' column ', height:150Panax Notoginseng     }, - view2: { theBorderColor: ' Red ', Borderwidth:1, flexdirection: ' Row ' +     }, A text: { theFontsize:14, Margin:10 +     } - }) $Appregistry.registercomponent (' reactnative ', () =>app);

After editing the code, we use Windows command to enter the project's directory, then use the command: react-native start to launch the project, then launch the emulator, and then use the command: React-native run-android. You can see the following effects in the simulator!

In combination with the code, we can see that the outermost view we use is the style style.main, using the Flex:1,bordercolor: ' Blue ' is the outermost blue border view of our image. A flex value greater than 0 means that the control is scalable, because there is no other view and the outermost view view of the competition space, so it fills our phone screen. Then there are 2 sub-view views.

The first view uses a style style.view1 its border is red, the flexdirection: ' column ' is scaled vertically, so the three text controls inside it are arranged from top to bottom.

The second view uses the style style.view2 its border is also red, the flexdirection: ' Row ' is scaled horizontally, so the 7 text controls inside it are arranged from left to right. (The last text is outside the phone's width border and is not displayed intact.) ）

From this we can see: in Rn Flexbox Flexdirection has two characters column and row default is the column value. When set to column, the control arranges the layout vertically and sequentially, and when set to row, the control arranges the layout in the horizontal order;

We said the outermost view setting flex=1 because there is no other control and it competes for space, so it fills our entire phone screen. Here we modify the style sheet styles to add a few styles to it and apply them to the 3 text in View1, modifying the code as follows:

1 varAPP =React.createclass ({2Renderfunction () {3         return (4<view style={styles.main}>5<view style={styles.view1}>6<text style={[styles.text,styles.row1]}>test1</text>7<text style={[styles.text,styles.row2]}>test2</text>8<text style={[styles.text,styles.row3]}>test3</text>9</View>Ten<view style={styles.view2}> One<text style={styles.text}>test4</text> A<text style={styles.text}>test5</text> -<text style={styles.text}>test6</text> -<text style={styles.text}>test7</text> the<text style={styles.text}>test8</text> -<text style={styles.text}>test9</text> -<text style={styles.text}>test10</text> -</View> +</View> -         ); +     } A }) at varStyles =stylesheet.create ({ - Main: { -Flex:1, bordercolor: ' Blue ', Margin:5, borderwidth:1 -     }, - View1: { -BorderColor: ' Red ', Borderwidth:1, flexdirection: ' column ', height:150 in     }, - view2: { toBorderColor: ' Red ', Borderwidth:1, flexdirection: ' Row ' +     }, - text: { theFontsize:14, Margin:10 *     }, $Row1: {flex:3},Panax NotoginsengRow2: {flex:2}, -ROW3: {flex:1} the})

Here we set the Flext value of the three text controls in View1 to 3,2,1, and then we see the effect on the phone as follows: We can tell that the height of the three text controls is 3:2:1 the height of our View1, which confirms our previous conclusion.

Then we look at the alignself layout, alignself the alignment of the main there are four kinds: flex-start, flex-end, center, auto, stretch. We add the following code:

1<view style={styles.view3}>2<view style={[styles.left,{width:100,height:40, Borderwidth:1,bordercolor: ' Silver '}]}><text>left< /text></view>3<view style={[styles.center,{width:100,height:40,borderwidth:1,bordercolor: ' Silver '}]}><Text>center </Text></View>4<view style={[styles.right,{width:100,height:40,borderwidth:1,bordercolor: ' Silver '}]}><Text>right </Text></View>5<view Style={[styles.default, {width:100, Height:40,borderwidth:1,bordercolor: ' Silver '}]}><text>default</Text></View>6</View>7 8 Styles:9VIEW3: {flex:1, Margin:5, bordercolor: ' Red ', borderwidth:1},TenLeft: {alignself: ' Flex-start '}, OneCenter: {alignself: ' center '}, ARight: {alignself: ' flex-end '}, - default: {alignself: ' Auto '},

You can see the following effects:

Then there are Alignitems, justifycontent, which are horizontally centered and vertically centered. Their usage is as follows, we add the following code:

1 <view style={[styles.view3,{alignitems: ' Center ', justifycontent: ' Center '}]}>2     < View style={{width:120,height:30, Borderwidth:1,bordercolor: ' Silver '}}>3         <Text> Horizontal Vertical Center </ Text>4     </View>5 </View>

After running, you can see the following effects:

These are the simple learning of RN's CSS and flexbox layouts.

React-native layout of controls