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

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

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

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

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

代码：

rush:js;"> 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,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;

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

原文地址：https://www.jb51.cc/js/37255.html