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;