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平台下不能输入中文的更多相关文章

  1. native-base中Input,Textarea等组件在ios平台下不能输入中文

    在上文react-native中TextInput在ios平台下不能输入中文已经解决. 但是在native-base中Input和Textarea都存在这样的问题.为了不要写多个组件,封装以下代码: ...

  2. React Native之微信分享(iOS Android)

    React Native之微信分享(iOS Android) 在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋 ...

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

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

  4. react native中使用echarts

    开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...

  5. WEB通知和React Native之即时通讯(iOS Android)

    WEB通知和React Native之即时通讯(iOS Android) 一,需求分析 1.1,允许服务器主动发送信息给客户端,客户端能监听到并且能接收. 1.2,为了方便同一个系统内的用户可以指定某 ...

  6. React Native 之 TextInput使用

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

  7. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  8. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  9. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

随机推荐

  1. Spring mvc之源码 handlerMapping和handlerAdapter分析

    Spring mvc之源码 handlerMapping和handlerAdapter分析 本篇并不是具体分析Spring mvc,所以好多细节都是一笔带过,主要是带大家梳理一下整个Spring mv ...

  2. WordPress代码高亮插件SyntaxHighlighter终极使用详解

    子曰: 工欲善其事,必先利其器.作为码农一枚,再加上站长这个已经不再光鲜的称呼,岂能没有一款经济实用.操作简单.而且功能必须强大.样式也必须好看的Wordpress代码高亮插件?!作为一个视代码如生命 ...

  3. 接口测试专题(Java & jmeter & Linux基础)

    以下是我和两个朋友原创文章合集,主题是接口测试,有Java接口测试案例和jmeter的案例,还有接口测试相关服务器操作基础.欢迎点赞.关注和转发. 接口测试 httpclient处理多用户同时在线 h ...

  4. ASP.NET Core 1.0: Using Entity Framework Core

    伴随着ASP.NET Core 1.0发布的还有Entity Framework Core 1.0; 官方文档链接:https://docs.efproject.net/en/latest/platf ...

  5. [LC]219题 Contains Duplicate II (存在重复元素 II )

    ①英文题目: Given an array of integers and an integer k, find out whether there are two distinct indices ...

  6. secureCRT安装与激活

    SecureCRT安装及激活方式 百度网盘地址: SecureCRT及激活软件的地址: 1. 安装secureCRT 百度网盘下载,点击scrt814-x64.exe,按照提示安装secureCRT, ...

  7. opencv 4 图像处理 (1 线性滤波,非线性滤波)

    1 线性滤波:方框滤波.均值滤波.高斯滤波 1.1方框滤波(box Filter) 1.2均值滤波(blur函数) 缺陷: 1.3高斯滤波(GaussianBlur函数) 1.4线性滤波核心API函数 ...

  8. IE6下CSS常见兼容性问题及解决方案

    1. 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素加浮动. 2. IE6下最小高度问题:在IE6下元素高度小于19px的时候,会被当作19px处理.解决方案:给元素加 overflow:h ...

  9. Intellij IDEA如何设置快速调整字体大小的快捷键

    Intellij IDEA快速调整字体大小的快捷键 第一种方法(方便) 单击左上角File,找到Settings并点击.(当然也可以直接Alt+Ctrl+s) 点击Editor下的General,勾选 ...

  10. 【2018寒假集训 Day1】【位运算】翻转游戏

    翻转游戏(flip) [问题描述] 翻转游戏是在一个 4 格×4 格的长方形上进行的,在长方形的 16 个格上每 个格子都放着一个双面的物件.每个物件的两个面,一面是白色,另一面是黑色, 每个物件要么 ...