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

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

说实话，最近一直再用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;