熟悉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 (
            <View style={this.props.backgroundStyle}>
                <Image source={{uri: this.props.imageSource}} style={this.props.phoneIcon}/>
                <TextInput placeholder={this.props.placeholder} style={this.props.phoneInPut}/>
            </View>
        )
    }
}

在上面的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里面去查看。
下一篇(数据的本地存储)

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页