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

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

TextInput介绍

官网地址:

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

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

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

'use strict';
import React, { Component } from 'react'
import PropTypes from 'prop-types'
//import rpx from '../util/unit' import {
TextInput,
StyleSheet,
Platform,
Dimensions
} from 'react-native' const deviceH = Dimensions.get('window').height
const deviceW = Dimensions.get('window').width const basePx = 750 function rpx(px) {
return px * deviceW / basePx
} export default class Input extends Component{
constructor(props) {
super(props)
}
static propTypes = {
value:PropTypes.string
}
shouldComponentUpdate(nextProps){
return Platform.OS !== 'ios' || (this.props.value === nextProps.value &&
(nextProps.defaultValue == undefined || nextProps.defaultValue == '' )) ||
(this.props.defaultValue === nextProps.defaultValue && (nextProps.value == undefined || nextProps.value == '' )); }
blur() {
this.refs.textInput.blur()
}
render() {
return (
<TextInput
ref="textInput"
placeholderTextColor='#ccc'
placeholder={'输入代码、名称或简拼'}
style={[styles.textInput,this.props.style]}
underlineColorAndroid="transparent"
{...this.props}
/>
)
}
}
const styles = StyleSheet.create({
textInput:{
height:rpx(60),
fontSize:rpx(30),
color:'#333',
backgroundColor:'#fff',
borderRadius:rpx(4),
paddingHorizontal:rpx(20),
paddingVertical: 0
}
})

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

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

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

shouldComponentUpdate(nextProps){
return Platform.OS !== 'ios' || (this.props.value === nextProps.value &&
(nextProps.defaultValue == undefined || nextProps.defaultValue == '' )) ||
(this.props.defaultValue === nextProps.defaultValue && (nextProps.value == undefined || nextProps.value == '' )); }

关于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. 纯手写springIOC

    大家好啊- 那么今天来带大家写一下spring的ioc. 其实也很简单,首先我们明白两点,java解析xml和java的反射机制,因为ioc就是主要是基于这两个来实现,今天只是简单的来大家实现下. 废 ...

  2. window模拟linux环境-cygwin安装

    cygwin是一个在windows平台上运行的unix模拟环境,它对于学习unix/linux操作环境,或者从unix到windows的应用程序移植,非常有用.通过它,你就可以在不安装linux的情况 ...

  3. html 表单input录入内容校验

    <p>文本框只能输入数字代码(小数点也不能输入)</p><input onkeyup="this.value=this.value.replace(/\D/g, ...

  4. 章节十、8-XPath---如何构建有效的XPath

    以下演示操作以该网址中的内容为例:https://learn.letskodeit.com/?_ga=2.143454972.85111248.1555037144-697706367.1554889 ...

  5. LeetCode算法题-Find Pivot Index(Java实现)

    这是悦乐书的第304次更新,第323篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第172题(顺位题号是724).给定一个整数nums数组,编写一个返回此数组的" ...

  6. Web Storage:浏览器端数据储存机制

    目录 概述 操作方法 存入/读取数据 清除数据 遍历操作 storage事件 参考链接 概述 这个API的作用是,使得网页可以在浏览器端储存数据.它分成两类:sessionStorage和localS ...

  7. WinForms 快速开发的工具类。

    下面是我本人在 WinForms 开发中积累的一些心得. 1. 在父窗体中打开子窗体 直接贴代码: private void btnCompare_Click(object sender, Event ...

  8. CSAPP:第十章 系统级I/O

    CSAPP:第十章 系统级I/O 10.1 unix I/O10.2 文件10.3 读取文件元数据10.4 读取目录内容10.5 共享文件10.6 我们该使用哪些I/O函数? 10.1 unix I/ ...

  9. 017_python常用小技巧

    一.进行十六进制运算 print(hex(int("6500000001", 16) - int("640064c6e7",16))) 0xff9b391a

  10. 【续】5年后,我们为什么要从 Entity Framework 转到 Dapper 工具?

    前言 上一篇文章收获了 140 多条评论,这是我们始料未及的. 向来有争议的话题都是公说公的理,婆说婆的理,Entity Framework的爱好者对此可以说是嗤之以鼻,不屑一顾,而Dapper爱好者 ...