React-Native TextInput组件详解及实例代码
更新时间:2016年10月08日 10:14:02 作者:顺子_RTFSC
这篇文章主要介绍了React-Native TextInput组件详解及实例代码的相关资料,需要的朋友可以参考下
同时适配Android和IOS
代码注释比较详细
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, View, TextInput, Platform, TouchableOpacity, } from 'react-native'; //获取屏幕信息 var Dimensions = require('Dimensions'); var width = Dimensions.get('window').width; class TextInputG extends Component { render() { return ( <View style={styles.container}> {/*账号输入框在这里用View包裹以便处理器样式*/} <View style={styles.textInputViewStyle}> <TextInput style={styles.textInputStyle} //站位符 placeholder='手机号'/> </View> {/*密码输入框*/} <View style={styles.textInputViewStyle}> <TextInput style={styles.textInputStyle} placeholder='密码' //密文 secureTextEntry={true}/> </View> {/*设置控件可点击*/} <TouchableOpacity onPress={()=>{alert('点击登录')}}> {/*登录按钮*/} <View style={styles.textLoginViewStyle}> <Text style={styles.textLoginStyle}>登录</Text> </View> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { //设置占满屏幕 flex: 1, // backgroundColor: 'black', marginTop: 140, }, //包裹输入框View样式 textInputViewStyle: { //设置宽度减去30将其居中左右便有15的距离 width: width - 30, height: 45, //设置圆角程度 borderRadius: 18, //设置边框的颜色 borderColor: 'blue', //设置边框的宽度 borderWidth: 1, //内边距 paddingLeft: 10, paddingRight: 10, //外边距 marginTop: 10, marginLeft: 20, marginRight: 20, //设置相对父控件居中 alignSelf: 'center', }, //输入框样式 textInputStyle: { width: width - 30, height: 35, paddingLeft: 8, backgroundColor: '#00000000', // alignSelf: 'center', //根据不同平台进行适配 marginTop: Platform.OS === 'ios' ? 4 : 8, }, //登录按钮View样式 textLoginViewStyle: { width: width - 30, height: 45, backgroundColor: 'red', borderRadius: 20, marginTop: 30, alignSelf: 'center', justifyContent: 'center', alignItems: 'center', }, //登录Text文本样式 textLoginStyle: { fontSize: 18, color: 'white', }, }); module.exports = TextInputG;
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关文章
React 使用browserHistory项目访问404问题解决
这篇文章主要介绍了React 使用browserHistory项目访问404问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-06-06解决React报错React Hook useEffect has a missing dependency
这篇文章主要为大家介绍了解决React报错React Hook useEffect has a missing dependency,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-12-12React-Hook中使用useEffect清除定时器的实现方法
这篇文章主要介绍了React-Hook中useEffect详解(使用useEffect清除定时器),主要介绍了useEffect的功能以及使用方法,还有如何使用他清除定时器,需要的朋友可以参考下2022-11-11
最新评论