React Native实现登录功能

学习React Native也有2个月了，从最开始的页面到点点击事件，到调用接口大体都会了，今天实现一个简单的登录功能。

这里需要说明几点：

1、<TextInput>组件在React Native中，默认是带一条横线的，如果想去掉输入框下面的横线，需要给<TextInput>指定一个underlineColorAndroid='transparent'，这样就可以去掉输入框下面的横线了；

2、密码输入框需要指定属性：secureTextEntry={true}

3、要显示图片，必须为<Image>标签指定宽度和高度，和Android中不同的是，<Image>没法自动调整图片的大小，没有类似Android中的wrap_content。

代码如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

class ReactDemo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.headtitle}>添加账号</Text>
                </View>
                <View style={styles.marginTopview}/>

                <View style={styles.inputview}>
                    <TextInput underlineColorAndroid='transparent' style={styles.textinput} placeholder='QQ号/手机号/邮箱'/>
                    <View style={styles.dividerview}>
                        <Text style={styles.divider}></Text>
                    </View>
                    <TextInput underlineColorAndroid='transparent' style={styles.textinput} placeholder='密码'
                               secureTextEntry={true}/>
                </View>
                <View style={styles.bottomview}>
                    <View style={styles.buttonview}>
                        <Text style={styles.logintext}>登 录</Text>
                    </View>


                    <View style={styles.bottombtnsview}>
                        <View style={styles.bottomleftbtnview}>
                            <Text style={styles.bottombtn}>无法登录？</Text>
                        </View>
                        <View style={styles.bottomrightbtnview}>
                            <Text style={styles.bottombtn}>新用户</Text>
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,backgroundColor: '#FFFFFF'
    },header: {
        height: 50,backgroundColor: '#12B7F5',justifyContent: 'center',},headtitle: {
        alignSelf: 'center',fontSize: 20,color: '#ffffff',avatarview: {
        height: 150,backgroundColor: '#ECEDF1',avatarimage: {
        width: 100,height: 100,alignSelf: 'center'
    },marginTopview: {
        height: 15,backgroundColor: '#F7F7F9'
    },inputview: {
        height: 100,textinput: {
        flex: 1,fontSize: 16,dividerview: {
        flexDirection: 'row',divider: {
        flex: 1,height: 1,backgroundColor: '#ECEDF1'
    },bottomview: {
        backgroundColor: '#ECEDF1',flex: 1,buttonview: {
        backgroundColor: '#1DBAF1',margin: 10,borderRadius: 6,alignItems: 'center',logintext: {
        fontSize: 17,color: '#FFFFFF',marginTop: 10,marginBottom: 10,emptyview: {
        flex: 1,bottombtnsview: {
        flexDirection: 'row',bottomleftbtnview: {
        flex: 1,height: 50,paddingLeft: 10,alignItems: 'flex-start',bottomrightbtnview: {
        flex: 1,paddingRight: 10,alignItems: 'flex-end',bottombtn: {
        fontSize: 15,color: '#1DBAF1',}
});

AppRegistry.registerComponent('ReactDemo',() => ReactDemo);

这里如果需要调试的话请移步：http://www.52php.cn/article/p-bxryrjzi-qq.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!