react-native中TextInput在ios平台下不能输入中文
react-native 0.55.4版本,发现TextInput 在iOS平台上无法输入中文的问题。
1. github上相关资料
import React, {Component} from 'react';
import {Platform, TextInput} from 'react-native';
class MyTextInput extends Component {
shouldComponentUpdate(nextProps){
return Platform.OS !== 'ios' || this.props.value === nextProps.value;
}
render() {
return <TextInput {...this.props} />;
}
};
export default MyTextInput;
代码加入到项目中后,试运行了下发现果然是可以的,以为至此不能输入中文的bug,应该是破掉了。
2.需要满足defultValue和value属性
项目中由于很多都地方使用了defultValue和value属性,所以在详细的测试中发现,以上封装只能满足于value属性的情况下没问题的,那么还需要满足defultValue属性了。
以下为封装后的代码:
import React, {Component} from 'react';
import {Platform, TextInput} from 'react-native';
class MyTextInput extends Component {
shouldComponentUpdate(nextProps) {
const { value, defaultValue } = this.props;
return Platform.OS !== 'ios'
|| (value === nextProps.value && !nextProps.defaultValue)
|| (defaultValue === nextProps.defaultValue && !nextProps.value);
}
render() {
return <TextInput {...this.props} />;
}
};
export default MyTextInput;
另: native-base中Input,Textarea等组件在ios平台下不能输入中文
react-native中TextInput在ios平台下不能输入中文的更多相关文章
- native-base中Input,Textarea等组件在ios平台下不能输入中文
在上文react-native中TextInput在ios平台下不能输入中文已经解决. 但是在native-base中Input和Textarea都存在这样的问题.为了不要写多个组件,封装以下代码: ...
- React Native之微信分享(iOS Android)
React Native之微信分享(iOS Android) 在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋 ...
- React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)
React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...
- react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
- WEB通知和React Native之即时通讯(iOS Android)
WEB通知和React Native之即时通讯(iOS Android) 一,需求分析 1.1,允许服务器主动发送信息给客户端,客户端能监听到并且能接收. 1.2,为了方便同一个系统内的用户可以指定某 ...
- React Native 之 TextInput使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- [转] 在React Native中使用ART
http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
随机推荐
- Vue基础系列(二)——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- Java锁-Synchronized深层剖析
Java锁-Synchronized深层剖析 前言 Java锁的问题,可以说是每个JavaCoder绕不开的一道坎.如果只是粗浅地了解Synchronized等锁的简单应用,那么就没什么谈的了,也不建 ...
- ASP.NET Core 1.0: 指定Static File中的文件作为default page
指定一个网站的default page是很容易的事情.譬如IIS Management中,可以通过default page来指定,而默认的index.html, index.htm之类,则早已经被设置 ...
- Zabbix-(五)监控Docker容器与自定义jvm监控项
Zabbix-(五)监控Docker容器与自定义jvm监控项 一.前言 前文中讲述了Zabbix对服务器硬件方面的监控功能,本文将讲述利用Zabbix监控Docker容器中的Java Web服务,并通 ...
- hdu 1285 确定比赛名次 (topsort)
确定比赛名次Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- CSS(8)---通俗讲解定位(position)
CSS(8)---通俗讲解定位(position) CSS有三种基本的定位机制: 普通流.浮动.定位.前面两个之前已经讲过,详见博客: 1.CSS(5)---通俗讲解盒子模型 2.CSS(6)---通 ...
- 一篇很好的学习查看Java源代码的文章
目录: 一. ArrayList概述 二. ArrayList的实现 1) 私有属性 2) 构造方法 3) 元素存储 4) 元素读取 5) 元素删除 6) 调整数组容量 ...
- MySQL数据每日备份
1.window下通过命令方式 @echo offset "Ymd=%date:~,4%-%date:~5,2%-%date:~8,2%%time:~0,2%%time:~3,2%" ...
- 2019-10-30:渗透测试,基础学习,mssql堆叠内联注入,mongodb基础语法
使用xp_cmdshell需要堆叠注入,http://192.168.190.148/less-1.asp?id=1';EXEC sp_configure 'show advanced options ...
- day 19 os模块的补充 序列化 json pickle
os 模块 os.path.abspath 规范绝对路径 os.path.split() 把路径分成两段,第二段是一个文件或者是文件夹 os.path.dirname 取第一部分 os.p ...