React-Native做一个文本输入框组件的实现代码-营山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

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://www.scyingshan.cn/article/psshcd.html

新闻中心

其他资讯