首页 / 移动开发 / Android / React-Native TextInput组件详解及实例代码

/** * 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}><TextInputstyle={styles.textInputStyle}//站位符placeholder="手机号"/></View>{/*密码输入框*/}<View style={styles.textInputViewStyle}><TextInputstyle={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;