上一篇 react-native文章提到了TextInput组件对安卓的适配问题,因此对该组件进行封装很有必要。

文章地址  react native定报预披项目知识点总结

TextInput介绍

官网地址:

https://facebook.github.io/react-native/docs/textinput

附加中文网地址:https://reactnative.cn/docs/textinput/

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等。最简单的用法就是丢一个TextInput到应用里,然后订阅它的onChangeText事件来读取用户的输入。

  1. 'use strict';
  2. import React, { Component } from 'react'
  3. import PropTypes from 'prop-types'
  4. //import rpx from '../util/unit'
  5.  
  6. import {
  7. TextInput,
  8. StyleSheet,
  9. Platform,
  10. Dimensions
  11. } from 'react-native'
  12.  
  13. const deviceH = Dimensions.get('window').height
  14. const deviceW = Dimensions.get('window').width
  15.  
  16. const basePx = 750
  17.  
  18. function rpx(px) {
  19. return px * deviceW / basePx
  20. }
  21.  
  22. export default class Input extends Component{
  23. constructor(props) {
  24. super(props)
  25. }
  26. static propTypes = {
  27. value:PropTypes.string
  28. }
  29. shouldComponentUpdate(nextProps){
  30. return Platform.OS !== 'ios' || (this.props.value === nextProps.value &&
  31. (nextProps.defaultValue == undefined || nextProps.defaultValue == '' )) ||
  32. (this.props.defaultValue === nextProps.defaultValue && (nextProps.value == undefined || nextProps.value == '' ));
  33.  
  34. }
  35. blur() {
  36. this.refs.textInput.blur()
  37. }
  38. render() {
  39. return (
  40. <TextInput
  41. ref="textInput"
  42. placeholderTextColor='#ccc'
  43. placeholder={'输入代码、名称或简拼'}
  44. style={[styles.textInput,this.props.style]}
  45. underlineColorAndroid="transparent"
  46. {...this.props}
  47. />
  48. )
  49. }
  50. }
  51. const styles = StyleSheet.create({
  52. textInput:{
  53. height:rpx(60),
  54. fontSize:rpx(30),
  55. color:'#333',
  56. backgroundColor:'#fff',
  57. borderRadius:rpx(4),
  58. paddingHorizontal:rpx(20),
  59. paddingVertical: 0
  60. }
  61. })

https://blog.csdn.net/halo1416/article/details/82703503

备注:TextInput组件内容超出加省列号:ellipsizeMode = 'tail' numberOfLines = {1 }

注明:IOS下TextInput不能输入中文,需要加上

  1. shouldComponentUpdate(nextProps){
  2. return Platform.OS !== 'ios' || (this.props.value === nextProps.value &&
  3. (nextProps.defaultValue == undefined || nextProps.defaultValue == '' )) ||
  4. (this.props.defaultValue === nextProps.defaultValue && (nextProps.value == undefined || nextProps.value == '' ));
  5.  
  6. }

关于shouldComponentUpdate 可参考文章:http://www.80iter.com/blog/1512370656110845

react native 封装TextInput组件的更多相关文章

  1. React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)

    React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...

  2. react native之组织组件

    这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...

  3. React Native之倒计时组件的实现(ios android)

    React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...

  4. React Native封装Toast与加载Loading组件

    React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...

  5. React Native常用第三方组件汇总--史上最全 之一

    React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown ...

  6. React Native常用第三方组件汇总--史上最全[转]

    本文出处: http://blog.csdn.net/chichengjunma/article/details/52920137 React Native 项目常用第三方组件汇总: react-na ...

  7. React Native 之 TextInput使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  8. React Native知识6-NavigatorIOS组件

    NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面.本组件并非由Facebook官方开发组维护.这一组件的开发完全由社区主导.如果纯js的方案能够满足你的需求的话,那 ...

  9. react native 之子组件和父组件之间的通信

    react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父 ...

随机推荐

  1. [C#学习笔记1]用csc.exe和记事本写一个C#应用程序

    csc.exe是C#的命令行编译器(CSharpCompiler),可以编译C#源程序成可执行程序.它与Visual Studio等IDE(Integrated Development Environ ...

  2. 部署 apply plugin: 'realm-android'

    我在build.gradle中添加 apply plugin: 'realm-android' //依赖Realm数据库,插件化依赖  这个后,同步,清理,运行的时候报 应该在build.gradle ...

  3. Android Studio导包无效,全部报红

    今天在转移项目到新的机器上的时候,出现了所有的导入失效,import不起作用,但是原有代码又能正常运行,在大佬的帮助下找到了这篇博客: https://blog.csdn.net/mr_chenxu/ ...

  4. eclipse下解决明明有jar包,却找不到的问题

    首先右键提示缺失jar包的项目,也可能是缺失maven依赖的项目. 右键选择properties. 选择deployment assembly. 将缺少依赖的jar包,add进去.

  5. 【原】无脑操作:HTML5 + CSS + JavaScript实现比赛排程

    1.背景:朋友请帮忙做一个比赛排程软件 2.需求: ① 比赛人数未知,可以通过文本文件读取参赛人员名称: ② 对参赛人员随机分组,一组两人,两两PK,如果是奇数人数,某一个参赛人员成为幸运儿自动晋级: ...

  6. python3通过os模块统计指定目录下文件个数

    代码: import os path = r"C:\Users\Administrator\Desktop\***" print('filenum:',len([lists for ...

  7. 网页验证码出不来,读取验证码时出错:javax.imageio.IIOException: Can't create cache file!

    版权声明:本文为博主原创文章,仅作为学习交流使用 转载请注明出处 https://www.cnblogs.com/linck/p/10593053.html 今天打开项目时,发现登陆界面的验证码出不来 ...

  8. Jalor 5学习心得

    jalor5是一套功能强大的框架,该框架集成了spring.mybatis.cxf.日志.异常等组件,和其它未提及的部分组件,如消息组件. 它还自带了权限管理,内容管理,国际化等功能,该框架在项目开发 ...

  9. mysql下载安装及常见问题

    1.下载MySql 官网下载地址:https://dev.mysql.com/downloads/mysql/ 2.安装 如果下载的是zip的,直接解压目录即可,我的解压目录时:C:\mysql\my ...

  10. 每日PA -2019年1月帖-每天更新

    开篇 "每日PA"有什么亮点?