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;

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