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 相关文章推荐
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
JavaScript交换两个变量方法实例
Nov 25 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
虫族 ZERG 概述
2020/03/14 星际争霸
基于PHP中的常用函数回顾
2013/07/11 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
js原型链原理看图说明
2012/07/07 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
python迭代器与生成器详解
2016/03/10 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
python3.7 sys模块的具体使用
2019/07/22 Python
Python Pandas 箱线图的实现
2019/07/23 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
python从PDF中提取数据的示例
2020/10/30 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
《手指教学》反思
2014/02/14 职场文书
自动一体化专业求职信
2014/03/15 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
教师节随笔
2015/08/15 职场文书
pytorch中的 .view()函数的用法介绍
2022/03/17 Python