React-Native做一个文本输入框组件的实现代码


Posted in Javascript onAugust 10, 2017

由于最近一直在做公司的项目,而且比较急。如今项目已经迭代到第三期,可以缓一缓了。。。

说实话,最近一直再用android做开发,而且时间也不宽裕,react-native有点生疏了。

好了,废话不多说,今天在做登录界面的时候,我发现,登录注册的文本框样式都是一个样的,如果一个一个的写,就会显得有些麻烦了,于是我就简单的封装了一下TextInput这一个组件

React-Native做一个文本输入框组件的实现代码

上图就是我放到登录界面的效果啦。

代码:

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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ready函数源代码研究
Dec 06 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
js实现省市级联效果分享
Aug 10 #Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 #Javascript
jquery对table做排序操作的实例演示
Aug 10 #jQuery
基于JavaScript实现飘落星星特效
Aug 10 #Javascript
提高Node.js性能的应用技巧分享
Aug 10 #Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 #Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 #Javascript
You might like
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
python在每个字符后添加空格的实例
2018/05/07 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
Python中函数的返回值示例浅析
2019/08/28 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
python实现视频读取和转化图片
2019/12/10 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
新娘父亲婚礼致辞
2014/01/16 职场文书
安全教育实施方案
2014/03/02 职场文书
党员个人总结自评
2015/02/14 职场文书