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 组件布局.组件与 ...
随机推荐
- Helm 3 发布 | 云原生生态周报 Vol. 27
作者 | 墨封.元毅.冬岛.敖小剑.衷源 业界要闻 1.Helm 3 发布 美国时间 11 月 13 日,Helm 团队发布 Helm 3 第一个稳定版本.Helm 3 以 Helm 2 的核心特性为 ...
- 002.Kubernetes简单入门实例
一 环境准备 1.1 基础环境 Kubernetes模式:单机版 系统环境:CentOS 7/172.24.9.157 部署方式:yum快速部署 其他设置:开启NTP.关闭防火墙及SELinux 二 ...
- python线程threading.Timer源码解读
threading.Timer的作用 官方给的定义是: """Call a function after a specified number of seconds: t ...
- C# VI: 删除字符串中指定字符的几种方法
本文基于Stackoverflows上以下几个Question: Fastest way to remove chars from string (http://stackoverflow.com/q ...
- Spring Boot2 系列教程(二十四)Spring Boot 整合 Jpa
Spring Boot 中的数据持久化方案前面给大伙介绍了两种了,一个是 JdbcTemplate,还有一个 MyBatis,JdbcTemplate 配置简单,使用也简单,但是功能也非常有限,MyB ...
- 力扣(LeetCode)Excel表列序号 个人题解
给定一个Excel表格中的列名称,返回其相应的列序号. 例如, A -> 1 B -> 2 C -> 3 ... Z -> 26 AA -> 27 AB -> 28 ...
- inventory
1.设置主机的默认inventory mode. 2. 设置自动Populate 数据
- 护网杯2019 mergeheap --pwn
护网 又是签到 一天 这道题一开始 不懂得如何泄露 libc 信息,就蒙了 后来群里师傅也是刚刚好 做出 到这里 我就接着做了 . 先看下保护,发现 全开了 然后 就看下流程 大概 就是添加 c ...
- Netty学习篇⑥--ByteBuf源码分析
什么是ByteBuf? ByteBuf在Netty中充当着非常重要的角色:它是在数据传输中负责装载字节数据的一个容器;其内部结构和数组类似,初始化默认长度为256,默认最大长度为Integer.MAX ...
- 【python测试开发栈】—python内存管理机制(二)—垃圾回收
在上一篇文章中(python 内存管理机制-引用计数)中,我们介绍了python内存管理机制中的引用计数,python正是通过它来有效的管理内存.今天来介绍python的垃圾回收,其主要策略是引用计数 ...