React-Native做一個文本輸入框組件

標籤：

我又回來啦！

由於最近一直在做公司的項目，而且比較急。如今項目已經迭代到第三期，可以緩一緩了。。。

今天在公司裡聽前端的說，這個項目本來是用React-Native做的（去年10月份），但是做到一半發現坑太多，就中途放棄了，於是讓我們android和iOS重新開發。。。

作為非常喜歡這個技術的我來說，表示相當的不服。

於是我打算利用閑暇時間做一個一模一樣的出來，反正介面我都有（嘻嘻）

說實話，最近一直再用android做開發，而且時間也不寬裕，react-native有點生疏了。

好了，廢話不多說，今天在做登入介面的時候，我發現，登入註冊的文字框樣式都是一個樣的，如果一個一個的寫，就會顯得有些麻煩了，於是我就簡單的封裝了一下TextInput這一個組件

 

就是我放到登入介面的效果啦。

 

代碼：

 1 import React, { Component } from ‘react‘; 2  3 import { 4     Text, 5     TextInput, 6     View, 7     PropTypes, 8     StyleSheet, 9     ToastAndroid10 } from ‘react-native‘11 12 class TextInputLogin extends Component {13     static propTypes = {14         name: React.PropTypes.string,15         txtHide: React.PropTypes.string,16         ispassword: React.PropTypes.bool17       }18 19     static defaultProps = {20         name: ‘名稱‘,21         txtHide: ‘內容‘,22         ispassword: false,23     }24       constructor (props) {25         super (props)26         this.state = {27           txtValue: "",28         }29     }30     render () {31         var { style, name, txtHide, ispassword } = this.props32         return(33             <View style={styles.container,style}>34                 <View style={styles.txtBorder}>35                     <Text style={styles.txtName}>{name}</Text>36                     <TextInput37                         underlineColorAndroid = {‘transparent‘}38                         style={styles.textInput}39                         multiline={false}40                         placeholder={txtHide}41                         password={ispassword} 42                         onChangeText={(text) => {43                             this.setState({44                                 txtValue: text45                             })46                         }}47                         value={this.state.txtValue}48                     />49                 </View>50             </View>51         )52     }53     getValue () {54         return this.state.txtValue55     }56 }57 58 const styles = StyleSheet.create({59     container: {60         flex: 1,61         alignItems: ‘center‘,62         flexDirection: ‘row‘63     },64     txtBorder: {65         height: 50,66         flex: 1,67         borderWidth: 1,68         borderColor: ‘#51A7F9‘,69         marginLeft: 50,70         marginRight: 50,71         borderRadius: 25,72         flexDirection: ‘row‘73     },74     txtName: {75         height: 20,76         width: 40,77         marginLeft: 20,78         fontSize: 15,79         marginTop: 15,80         color: ‘#51A7F9‘,81         marginRight: 10,82         fontSize: 1483     },84     textInput: {85         height: 50,86         width: 20087     }88 })89 90 module.exports = TextInputLogin;

 

React-Native做一個文本輸入框組件