由于最近一直在做公司的项目，而且比较急。如今项目已经迭代到第三期，可以缓一缓了。。。
说实话，最近一直再用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;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
