网站建设资讯

NEWS

网站建设资讯

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(
      
        
          {name}
           {
              this.setState({
                txtValue: text
              })
            }}
            value={this.state.txtValue}
          />
        
      
    )
  }
  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;

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


新闻名称:React-Native做一个文本输入框组件的实现代码
网站路径:http://njwzjz.com/article/psshcd.html