国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

React-Native做一個文本輸入框組件的實現代碼

2019-11-19 15:50:52
字體:
來源:轉載
供稿:網友

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

說實話,最近一直再用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;

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 卢氏县| 滦南县| 陕西省| 临颍县| 桐柏县| 彭水| 林芝县| 成武县| 崇左市| 扎鲁特旗| 绵阳市| 丹凤县| 呈贡县| 建水县| 通河县| 大英县| 海城市| 信丰县| 尼玛县| 浙江省| 南通市| 南阳市| 天全县| 尼玛县| 朝阳县| 镇江市| 禹州市| 和静县| 独山县| 河南省| 刚察县| 张家港市| 衡阳县| 绥滨县| 华宁县| 桃园市| 额尔古纳市| 喀喇沁旗| 潜江市| 永善县| 永济市|