Getting started with React-Native (3) -- CSS and UI layout, reactui

React-Native Getting Started Guide (3)-CSS and UI layout, reactui
React-Native Getting Started Guide github: https://github.com/vczero/react-native-lession

React-Native: Use JavaScript to develop your native applications, release Native UI experience, and experience Hybird development efficiency.

The article written in the last week is as follows:

Part 1 hello react-native
Part 2 Understanding the code structure
Chapter 3 CSS and layout
Chapter 4. Learning react-native layout
Chapter 5 ui components
There are a few more articles that need to be completed this week (this piece will be updated at any time):

Chapter 6 JSX Grammar
Chapter 7. DIY Components
Chapter 8. Modular Development
Chapter 10 Building Project Architecture
Chapter 11 Source Code Analysis
Part 3 CSS and UI layout 1. Understanding React-Native components
As developers know, the importance of UI components for an application. Maybe, in an application, you do n’t have a complete and systematic construction of UI components, but you must have more or less the urge to extract the components, just like some urges are human instinct ... . This is an instinct as a developer. Then the reuse and unification of components is very necessary. Common components are: calendar, list down (often in the application as a drop-down refresh), navigation bar, head, bottom, tabs and so on. React-Native provides a set of iOS native components, so you don't need HTML5 to simulate components. React-Native uses CSS to build page layouts, and Native iOS Components to provide us with powerful component functions. Currently there are components such as:
Second, use CSS styles & Flexbox layout
In the first article, I already know how to build a project. Here also create a HelloWorld project. The default startup interface is as follows:
1. Basic style
The View and Text components are used as presentation objects. First, modify the code in index.ios.js. Here, you only need to pay attention to the templates in StyleSheet and render. The modified code is as follows:
/ **
* Sample React Native App
* https://github.com/facebook/react-native
* /
'use strict';

var React = require ('react-native');
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} = React;

var HelloWorld = React.createClass ({
    render: function () {
        return (
            <View>
                <View> </ View>
            </ View>
        );
    }
});

var styles = StyleSheet.create ({
});

AppRegistry.registerComponent ('HelloWorld', () => HelloWorld);
At this time, your cmd + R refresh simulator should see a blank interface. Now, it is time to show the charm of css. The CSS expression used by React-native is a JS self-quantity object, and strictly distinguishes the type of the object attribute, so it is necessary to follow the writing of the object, rather than using the previous writing of CSS.
(1) Add a rectangle with a border and a red border
    Adding a style directly to a component is this: style = {{height: 40, borderWidth: 1, borderColor: 'red'}} style is a component's own property, and the first {} JS execution environment or template , The second {} is just the brackets of the CSS style object (slowly realized, not difficult to understand). The modified code is as follows:
    render: function () {
        return (
            <View>
                <View style = {{height: 40, borderWidth: 1, borderColor: 'red'}}>

                </ View>
            </ View>
        );
    }
    cmd + R refreshes the simulator, and the results are as follows:
    (2) How do I know which styles the component supports?
    The above is already very simple, as a web developer can write with his toes closed his eyes. If we need to know which styles of the component, without having to check the manual, one of the easiest way is to write an attribute in the style sheet, for example, I write an attribute "border" without. However, this attribute must be written to the creation of styles, not inline styles. Written in inline style, you can't see the error message. My door was rewritten into a style sheet creation class:
    var HelloWorld = React.createClass ({
        render: function () {
                return (
                    <View>
                        <View style = {styles.style_1}>

                        </ View>
                    </ View>
                );
        }
    });

    var styles = StyleSheet.create ({
        style_1: {
            border: '1px solid red',
            height: 40,
            borderWidth: 1,
            borderColor: 'red',
        }
    });
     At this time, you will be able to see all the styles of the style sheet error and prompt, as shown:
    (3) Independent style class
    In fact, the independent style class has been shown above, then the creation of the style class is very simple, we only need to use React.StyleSheet to create the class. In fact, the created class is just a js object. Then the reference on the component is this <View style = {{object name. Object property}}> </ View>, just like the code in (2) above.

    2. Talk about the Flexbox layout
    In fact, such a CSS style will be used for web development, so let's talk about the layout. In addition to margin, padding, position and other familiar web layouts, the most important thing is flexbox. The currently supported attributes are as follows, there are 6:
     (1) Let me talk about the flex attribute first, the previous code
        var HelloWorld = React.createClass ({
            render: function () {
                return (
                    <View style = {styles.style_0}>
                        <View style = {styles.style_1}> </ View>
                        <View style = {styles.style_1}> </ View>
                        <View style = {{flex: 10}}> </ View>
                    </ View>
                );
            }
        });

        var styles = StyleSheet.create ({
            style_0: {
                flex: 1,
            },
            style_1: {
                flex: 5,
                height: 40,
                borderWidth: 1,
                borderColor: 'red',
            }
        });
        When an (element) component defines the flex attribute, it means that the element is scalable. Of course, the flex attribute value is only expanded when it is greater than 0, and the other is not expanded when it is less than or equal to 0, for example: flex: 0, flex: -1, etc. In the above code, the outermost view is scalable because there is no sibling node and he preempts space. The inner layer is 3 views, and you can see that the flex properties of the three views add up to 5 + 5 + 10 = 20, so the first view and the second view take up 1/4 of the expansion space, and the last view takes 1 / 2 spaces, such as:
    (2) flexDirection
    flexDirection has only two properties in React-Native, one is row (horizontal scaling) and column (vertical scaling). Specific thoughts can be seen in the following code:
    var HelloWorld = React.createClass ({
        render: function () {
            return (
                <View style = {styles.style_0}>
                    <View style = {styles.style_1}>
                    <Text style = {{marginTop: 40, fontSize: 25}}> 1/4 height </ Text>
                    <Text style = {{marginTop: 40, fontSize: 25}}> 1/4 height </ Text>
                </ View>
                <View style = {[styles.style_1, {flexDirection: 'column'}]}>
                    <Text style = {{marginTop: 40, fontSize: 25}}> 1/4 height </ Text>
                    <Text style = {{marginTop: 40, fontSize: 25}}> 1/4 height </ Text>
                </ View>
                <View style = {{flex: 10, borderWidth: 1, borderColor: 'red',}}>
                    <Text style = {{marginTop: 40, fontSize: 25}}> 1/2 high </ Text>
                    </ View>
                </ View>
            );
        }
    });

    var styles = StyleSheet.create ({
        style_0: {
            flex: 1,
        },
        style_1: {
            flex: 5,
            flexDirection: 'row',
            height: 40,
            borderWidth: 1,
            borderColor: 'red',
        }
    });
    The specific effects are as follows:
    (3) alignSelf: alignment method
    There are four main alignSelf alignment methods: flex-start, flex-end, center, auto, stretch. Looking at the code, it should be clear:
     The effect is like
     (4) Horizontal and vertical center
     alignItems is a variant of alignSelf, similar to the function of alignSelf, can be used for horizontal centering; justifyContent is used for vertical centering, with many attributes, you can understand.
     The effect is like