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

前端之家收集整理的这篇文章主要介绍了React-Native做一个文本输入框组件的实现代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

代码

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;

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

猜你在找的JavaScript相关文章