react native 封装TextInput组件
上一篇 react-native文章提到了TextInput组件对安卓的适配问题,因此对该组件进行封装很有必要。
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组件的更多相关文章
- React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)
React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...
- react native之组织组件
这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...
- React Native之倒计时组件的实现(ios android)
React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...
- React Native封装Toast与加载Loading组件
React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...
- React Native常用第三方组件汇总--史上最全 之一
React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown ...
- React Native常用第三方组件汇总--史上最全[转]
本文出处: http://blog.csdn.net/chichengjunma/article/details/52920137 React Native 项目常用第三方组件汇总: react-na ...
- React Native 之 TextInput使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native知识6-NavigatorIOS组件
NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面.本组件并非由Facebook官方开发组维护.这一组件的开发完全由社区主导.如果纯js的方案能够满足你的需求的话,那 ...
- react native 之子组件和父组件之间的通信
react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父 ...
随机推荐
- [C#学习笔记1]用csc.exe和记事本写一个C#应用程序
csc.exe是C#的命令行编译器(CSharpCompiler),可以编译C#源程序成可执行程序.它与Visual Studio等IDE(Integrated Development Environ ...
- 部署 apply plugin: 'realm-android'
我在build.gradle中添加 apply plugin: 'realm-android' //依赖Realm数据库,插件化依赖 这个后,同步,清理,运行的时候报 应该在build.gradle ...
- Android Studio导包无效,全部报红
今天在转移项目到新的机器上的时候,出现了所有的导入失效,import不起作用,但是原有代码又能正常运行,在大佬的帮助下找到了这篇博客: https://blog.csdn.net/mr_chenxu/ ...
- eclipse下解决明明有jar包,却找不到的问题
首先右键提示缺失jar包的项目,也可能是缺失maven依赖的项目. 右键选择properties. 选择deployment assembly. 将缺少依赖的jar包,add进去.
- 【原】无脑操作:HTML5 + CSS + JavaScript实现比赛排程
1.背景:朋友请帮忙做一个比赛排程软件 2.需求: ① 比赛人数未知,可以通过文本文件读取参赛人员名称: ② 对参赛人员随机分组,一组两人,两两PK,如果是奇数人数,某一个参赛人员成为幸运儿自动晋级: ...
- python3通过os模块统计指定目录下文件个数
代码: import os path = r"C:\Users\Administrator\Desktop\***" print('filenum:',len([lists for ...
- 网页验证码出不来,读取验证码时出错:javax.imageio.IIOException: Can't create cache file!
版权声明:本文为博主原创文章,仅作为学习交流使用 转载请注明出处 https://www.cnblogs.com/linck/p/10593053.html 今天打开项目时,发现登陆界面的验证码出不来 ...
- Jalor 5学习心得
jalor5是一套功能强大的框架,该框架集成了spring.mybatis.cxf.日志.异常等组件,和其它未提及的部分组件,如消息组件. 它还自带了权限管理,内容管理,国际化等功能,该框架在项目开发 ...
- mysql下载安装及常见问题
1.下载MySql 官网下载地址:https://dev.mysql.com/downloads/mysql/ 2.安装 如果下载的是zip的,直接解压目录即可,我的解压目录时:C:\mysql\my ...
- 每日PA -2019年1月帖-每天更新
开篇 "每日PA"有什么亮点?