学习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.jb51.cc/article/p-bxryrjzi-qq.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。