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

React-Native做一个文本输入框组件的实现代码

程序员文章站 2022-05-26 08:13:40
由于最近一直在做公司的项目,而且比较急。如今项目已经迭代到第三期,可以缓一缓了。。。 说实话,最近一直再用android做开发,而且时间也不宽裕,react-native...

由于最近一直在做公司的项目,而且比较急。如今项目已经迭代到第三期,可以缓一缓了。。。

说实话,最近一直再用android做开发,而且时间也不宽裕,react-native有点生疏了。

好了,废话不多说,今天在做登录界面的时候,我发现,登录注册的文本框样式都是一个样的,如果一个一个的写,就会显得有些麻烦了,于是我就简单的封装了一下textinput这一个组件

React-Native做一个文本输入框组件的实现代码

上图就是我放到登录界面的效果啦。

代码:

import react, { component } from 'react';

import {
  text,
  textinput,
  view,
  proptypes,
  stylesheet,
  toastandroid
} from 'react-native'

class textinputlogin extends component {
  static proptypes = {
    name: react.proptypes.string,
    txthide: react.proptypes.string,
    ispassword: react.proptypes.bool
   }

  static defaultprops = {
    name: '名称',
    txthide: '内容',
    ispassword: false,
  }
   constructor (props) {
    super (props)
    this.state = {
     txtvalue: "",
    }
  }
  render () {
    var { style, name, txthide, ispassword } = this.props
    return(
      <view style={styles.container,style}>
        <view style={styles.txtborder}>
          <text style={styles.txtname}>{name}</text>
          <textinput
            underlinecolorandroid = {'transparent'}
            style={styles.textinput}
            multiline={false}
            placeholder={txthide}
            password={ispassword} 
            onchangetext={(text) => {
              this.setstate({
                txtvalue: text
              })
            }}
            value={this.state.txtvalue}
          />
        </view>
      </view>
    )
  }
  getvalue () {
    return this.state.txtvalue
  }
}

const styles = stylesheet.create({
  container: {
    flex: 1,
    alignitems: 'center',
    flexdirection: 'row'
  },
  txtborder: {
    height: 50,
    flex: 1,
    borderwidth: 1,
    bordercolor: '#51a7f9',
    marginleft: 50,
    marginright: 50,
    borderradius: 25,
    flexdirection: 'row'
  },
  txtname: {
    height: 20,
    width: 40,
    marginleft: 20,
    fontsize: 15,
    margintop: 15,
    color: '#51a7f9',
    marginright: 10,
    fontsize: 14
  },
  textinput: {
    height: 50,
    width: 200
  }
})

module.exports = textinputlogin;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。