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. php imagick 文字居中的方法

    php imagick 文字居中的方法<pre> public function getwenzinfo($nickName) { $nickNamelen = mb_strlen($ni ...

  2. yum.rpm一点点

    rpm 1.rpm -qi查询包的详细信息 [root@centos7 tmp]# rpm -qi tree Name : tree Version : 1.6.0 Release : 10.el7 ...

  3. Kubernetes概述

    1. Kubernetes是什么 Kubernetes是一个可移植的.可扩展的.用于管理容器化工作负载和服务的开源平台,它简化(促进)了声明式配置和自动化.它有一个庞大的.快速增长的生态系统.Kube ...

  4. My First Cloud Application's Design

    Structure Diagram as following: Questions list: 1. Skydrive Integration > Based on the MSDN commu ...

  5. 通过 position:fixed 实现底部导航

    通过 position:fixed 实现底部导航 HTML <div id="footer">页脚</div> CSS #footer { clear: b ...

  6. codeblocks在Ubuntu 18 下的安装

    codeblocks在Ubuntu 18 下的安装: 1. 现在应用中心直接下载CodeBlocks IDE: 2. Ctrl + Alt + T 打开终端 Terminal 3. 输入:  sudo ...

  7. 领扣(LeetCode)寻找峰值 个人题解

    峰值元素是指其值大于左右相邻值的元素. 给定一个输入数组 nums,其中 nums[i] ≠ nums[i+1],找到峰值元素并返回其索引. 数组可能包含多个峰值,在这种情况下,返回任何一个峰值所在位 ...

  8. basename 和 dirname

    basename将目录路径去掉,返回文件的实际文件名(此处也可以是最后一级目录).如与$0一起 if [ $? -eq 0 ]; then cd - ; mv `basename $0` test1. ...

  9. openresty如何完美替换nginx

    下载openresty wget https://openresty.org/download/openresty-1.15.8.1.tar.gz tar zxvf openresty-1.15.8. ...

  10. BIM到底是啥?

           近年来随着BIM的大火以及一些政策的支持,BIM逐渐走入建筑行业的视野,但其实大部分人都不知道或者说不了解BIM到底是啥.去百度上进行搜索,你会知道BIM就是Building Infor ...