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

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

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

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

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

代码：

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;

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