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;
React-Native做一个文本输入框组件的更多相关文章
- 用react native 做的一个推酷client
用react native 做的一个推酷client 仅供大家參考.仅仅为抛砖引玉.希望大家能以此来了解react.并编写出很多其它的优质的开源库,为程序猿做出贡献. 用的的组件: Navigator ...
- 如何用 React Native 创建一个iOS APP?(三)
前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...
- 如何用 React Native 创建一个iOS APP?(二)
我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...
- 如何用 React Native 创建一个iOS APP?
诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 Reac ...
- React Native之本地文件系统访问组件react-native-fs的介绍与使用
React Native之本地文件系统访问组件react-native-fs的介绍与使用 一,需求分析 1,需要将图片保存到本地相册: 2,需要创建文件,并对其进行读写 删除操作. 二,简单介绍 re ...
- React Native创建一个APP
React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽 ...
- 【React Native开发】React Native控件之ListView组件解说以及最齐全实例(19)
),React Native技术交流4群(458982758).请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...
- 提问(prompt 消息对话框)用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)
提问(prompt 消息对话框) prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息.弹出消息对话框(包含一个确定按钮.取消按钮与一个文本输入框). 语法: prompt(str1, s ...
- 过年了,基于Vue做一个消息通知组件
前言 今天除夕,在这里祝大家新年快乐!!!今天在这个特别的日子里我们做一个消息通知组件,好,我们开始行动起来吧!!!项目一览 效果很简单,就是这种的小卡片似的效果. 我们先开始写UI页面,可自定义消息 ...
随机推荐
- Nginx Configure时配置
Configure Arguments Configure arguments common for nginx binaries from pre-built packages for stable ...
- Oracle System密码忘记 密码修改、删除账号锁定lock
一下转自http://www.cnblogs.com/yjhrem/articles/2340149.html 运行cmd命令行 录入 sqlplus /nolog 无用户名登录 conn /as ...
- [转载]iOS开发:获取设备信息
开发iOS平台的应用的时候,可以获取iOS设备的设备信息,包括设备的名称,设备的机型,设备的iOS版本等等.设备信息主要来自 UIDevice 类. UIDevice *currentDevice = ...
- Python爬虫——抓取糗百段子
在别人博客里学习的 抓取糗百段子,由于糗百不断的更新,代码需要改正. 抓取网页:http://www.qiushibaike.com/hot/page/1 修改后的代码如下: # -*- coding ...
- Oracle11g R2学习系列 之四Maven+Struts+Spring实验
今天试一下Java调用Oracle来看一下.会不会也如昨天实验的一样坑呢?由于我对于Java也接触的不多,所以不打算直接使用该收提供的实验文档,而是自己利用Maven+Struts+Spring来自己 ...
- python3.4入门——核心数据类型
变量.对象和引用 变量的创建:一个变量(即变量名,如a),当代码第一次给它赋值就创建了它. 变量类型:变量没有任何和它关联的类型信息约束.类型的概念存在于对象中,而不是变量名中.变量原本是通用的,只是 ...
- cf B. Simple Molecules
http://codeforces.com/contest/344/problem/B #include <cstdio> #include <cstring> using n ...
- hdu 1255 覆盖的面积
http://acm.hdu.edu.cn/showproblem.php?pid=1255 #include <cstdio> #include <cstring> #inc ...
- 微软官方的Unity支持组件
https://unity.codeplex.com/ http://www.nuget.org/packages/Unity.Interception/ http://www.nuget.org/p ...
- 【HDU1272】小希的迷宫(并查集基础题)
仍旧裸敲并查集.有这两点注意: 1.输入 0 0 时候要输出YES 2.留心数组的初始化 #include <iostream> #include <cstring> #inc ...