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;