来做一个登录界面，这里使用的是组件开发，将登录界面做成一个组件在入口文件中调用，先看一下组件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TextInput, } from 'react-native'; var Dimensions = require('Dimensions'); //定义一些全局变量 var {width} = Dimensions.get('window'); class loginView extends Component { render() { return ( <View style={styles.container}> {/*头像*/} <Image style={styles.pic} source={{uri: 'https://img.duicode.com/wp-content/uploads/2016/12/icon_user_monkey_i6@2x.png'}}> </Image> {/*账号密码*/} <TextInput style={styles.textInputStyle} placeholder={'请输入用户名'} /> <TextInput style={styles.textInputStyle} placeholder={'请输入密码'} password={true} /> {/*登录*/} <View style={styles.loginBtnStyle}> <Text style={{color:'white'}}>登录</Text> </View> {/*设置*/} <View style={styles.settingStyle}> <Text style={{color:'green'}}>无法登陆</Text> <Text style={{color:'green'}}>新用户</Text> </View> {/*其他登录方式*/} <View style={styles.otherLoginStyle}> <Text>其他登录方式:</Text> <Image style={styles.img} source={require('./phone.png')}></Image> <Image style={styles.img} source={require('./phone.png')}></Image> <Image style={styles.img} source={require('./phone.png')}></Image> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#dddddd', alignItems:'center', }, pic: { width:80, height:80, borderRadius:40, borderWidth:4, borderColor:'white', marginTop:50, marginBottom:30, }, username:{ }, password:{ }, textInputStyle:{ height:44, backgroundColor:'white', marginBottom:1, textAlign:'center', }, loginBtnStyle:{ height:44, width:width - 40, backgroundColor:'blue', marginTop:30, marginBottom:20, justifyContent:'center', alignItems:'center', borderRadius:5, }, settingStyle:{ flexDirection:'row', justifyContent:'space-between', width:width - 40, }, otherLoginStyle:{ // backgroundColor:'red', flexDirection:'row', alignItems:'center', //绝对定位 position:'absolute', bottom:10, left:20, }, img:{ width:40, height:30, marginLeft:5, } }); //输出类 module.exports = loginView; |
然后在入口文件中调用
|
1 2 3 4 5 6 7 8 9 10 11 |
//引入外部的js文件 var LoginView = require('./loginView'); class MyProject4 extends Component { render() { return ( <LoginView /> ); } } AppRegistry.registerComponent('MyProject', () => MyProject4); |
来看一下结果
转载请注明：怼码人生 » React Native登录界面
