熟悉RN页面的搭建和flexbox布局

之前已经分享了RN的环境搭建和初始化工程的过程。
下一步就是来搭建简单的页面。

props 和 state
我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。

一般来说，你需要在constructor中初始化state（译注：这是ES6的写法，早期的很多ES5的例子使用的是getInitialState方法来初始化state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。
也就是说要刷新UI就是调用setState方法，改变组件的state。

废话不多说，我们来上代码。
首先导入头文件

import React, {Component} from 'react';
import {View, Text, StyleSheet, Image, TextInput, TouchableOpacity} from 'react-native';

然后我们自定义一个图片和输入框的组合组件

class TextInputAndText extends Component {
    constructor(props) {
        super(props)
    }


    render() {
        return (
            this.props.backgroundStyle}>
                this.props.imageSource}} style={this.props.phoneIcon}/>
                this.props.placeholder} style={this.props.phoneInPut}/>
            
        )
    }
}

在上面的constructor中可以返回this.state来控制组件的状态

接着我们export一个页面，组件如果在外界被引用就要export。

export default class MainVc extends Component {

    constructor(props) {
        super(props)
    }
    storageData() {
    //点击登录
    }
    getData() {
    //点击获取数据
    }
 render() {
        return (
            <View style={styles.container}>
                <NavigationBar navigator={this.props.navigator} title="注册"/>
                <TextInputAndText backgroundStyle={styles.phoneBackView} imageSource={'tel'}
                                  phoneIcon={styles.phoneIcon} placeholder="手机号"
                                  phoneInPut={styles.phoneInPut}/>
                <TextInputAndText backgroundStyle={styles.paasswordBackView} imageSource={'password'}
                                  phoneIcon={styles.phoneIcon} placeholder="密码"
                                  phoneInPut={styles.phoneInPut}/>

                <View style={styles.verifyBackView}>
                    <Image source={require('./pic/picVerify.png')} style={styles.verifyIcon}/>
                    <TextInput placeholder={"请输验证码"} style={styles.verifyInPut}/>
                    <TouchableOpacity>
                        <Image source={require('./pic/verifyNum.png')} style={styles.verifyIcon}/>
                    TouchableOpacity>
                View>


                <TouchableOpacity style={styles.loginBtn} onPress={() => this.storageData()}>
                    <Text style={{color: 'white', fontSize: 20}}> 登 录 Text>
                TouchableOpacity>

            View>
        )
    }
}

styles

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    phoneBackView: {
        borderColor: '#DDDDDD',
        borderWidth: 1,
        marginHorizontal: 30,
        height: 40,
        marginTop: 100,
        flexDirection: 'row'
    },
    phoneIcon: {
        flex: 1,
        height: 30,
        width: 30,
        marginTop: 5,
        marginRight: 15,
    },
    phoneInPut: {
        flex: 30,
        height: 30,
        marginTop: 5,
    },
    paasswordBackView: {
        borderColor: '#DDDDDD',
        borderWidth: 1,
        marginHorizontal: 30,
        height: 40,
        marginTop: 30,
        flexDirection: 'row'
    },
  verifyBackView: {
        borderColor: '#DDDDDD',
        borderWidth: 1,
        marginHorizontal: 30,
        height: 40,
        marginTop: 30,
        flexDirection: 'row'
    },
    verifyIcon: {
        flex: 1,
        height: 30,
        width: 30,
        marginTop: 5,
        marginRight: 15,
    },
    verifyInPut: {
        flex: 30,
        height: 30,
        marginTop: 5,
        },

    loginBtn: {
        height: 40,
        marginHorizontal: 30,
        marginTop: 50,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#FC5A34',
    }
});

我们在React Native中使用flexbox规则来指定某个组件的子元素的布
.React Native中的Flexbox的工作原理和web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，alignItems的默认值是stretch而不是flex-start，以及flex只能指定一个数字值。
flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。
justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between
alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch
flex可以指定元素在父组件中的比例，例如，A的flex是1，B的flex是2总共就这两个组件，那么A就占父组件的三分之一，B就占父组件的三分之二。
margin：组件间的间距,有marginLeft, marginRight, marginTop,marginBottom.
padding:组件内部到组件边框的距离，有paddingLeft,paddingRight,paddingTop,paddingBottom.
还有bordercolor（边框颜色），borderwidth(边框宽度)，zIndex(z轴的层级强度)等属性，大家可以在View组件的API里面去查看。
下一篇（数据的本地存储）