扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
由于最近一直在做公司的项目,而且比较急。如今项目已经迭代到第三期,可以缓一缓了。。。
创新互联公司专业为企业提供富裕网站建设、富裕做网站、富裕网站设计、富裕网站制作等企业网站建设、网页设计与制作、富裕企业网站模板建站服务,十余年富裕做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
说实话,最近一直再用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() } 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; {name} { this.setState({ txtValue: text }) }} value={this.state.txtValue} />
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流