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;

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！