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}>          <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;