React-Native TextInput组件 React-Native TextInput组件详解及实例代码
顺子_RTFSC 人气:0想了解React-Native TextInput组件详解及实例代码的相关内容吗,顺子_RTFSC在本文为您仔细讲解React-Native TextInput组件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:React-Native,TextInput组件,React-Native,TextInput,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;
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
加载全部内容