欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

React-Native TextInput组件详解及实例代码

程序员文章站 2024-03-05 15:43:07
同时适配android和ios 代码注释比较详细 /** * sample react native app * https://github.co...

同时适配android和ios

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;

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