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

在上文react-native中TextInput在ios平台下不能输入中文已经解决。

但是在native-base中Input和Textarea都存在这样的问题。为了不要写多个组件,封装以下代码:

import React from ‘react‘;
import PropTypes from ‘prop-types‘;
import {
  Platform,
} from ‘react-native‘;
import {
  Textarea,
  Input,
} from ‘native-base‘;

export const inputSupportLanguage = (WrappedComponent) => {
  class InputSupportLanguage extends React.Component {

    shouldComponentUpdate(nextProps) {
      const { value, defaultValue } = this.props;
      return Platform.OS !== ‘ios‘
      || (value === nextProps.value && !nextProps.defaultValue)
      || (defaultValue === nextProps.defaultValue && !nextProps.value);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  InputSupportLanguage.propTypes = {
    value: PropTypes.string,
    defaultValue: PropTypes.string,
  };

  return InputSupportLanguage;
};

export const NBInput = inputSupportLanguage(Input);
export const NBTextarea = inputSupportLanguage(Textarea);

在相应的文件中就可以import 需要使用的组件,像使用native-base中Input和Textarea一样去使用了。eg:

import {
  NBInput,
  NBTextarea,
} from ‘utils/inputSupportLanguage‘;

原文地址:https://www.cnblogs.com/qiqi715/p/9526920.html

时间: 2024-10-11 02:08:03

native-base中Input,Textarea等组件在ios平台下不能输入中文的相关文章

AntD中input和form组件的问题

AntD中input的小坑 在用antd中我把input封装成的一个用来修改内容的小组件(input输入框的内容会根据从修改的内容展现默认值),当我使用了defaultValue这个属性 不管传值怎么变化这个defaultValue属性只有在第一次渲染的时候生效  随后的渲染一直用的时缓存中的数据. 因为每次打开组件的时候我需要跟新input中的值的  我就在input中添加了defaultValue这个属性  就出现了状态不更新的问题了 <Input defaultValue={this.pr

即时搜索:对于ios自带输入法输入中文时多次触发input事件的处理

实现移动端的即时搜索的最佳方案,一定是使用input propertychange事件了,但是在ios设备上遇到了问题,使用ios自带输入法输入汉字时,会出现多次触发input事件的情况,一开始可能由于搜索的关键字不得法,没有即时找到合适的方案,后来终于在网上找到了解决方案,现记录如下: 代码实现 /** * @param flag: 用于标记是否是非直接的文字输入 */ var flag = false; $('#id').on({ 'compositionstart': function()

Unity中集成ShareSDK(3.X)的功能-IOS平台

上一篇讲了android平台下shareSDK的分享,这一篇我们说一下IOS平台下的配置. 首先我们修改ShareSDKUnity3DBridge.m文件(/Assets / Plugins / iOS / ShareSDKUnity3DBridge.m )对于需要使用SSO(QQ空间.人人网)或者部分需要客户端分享的平台(包括:微信.Google+.QQ).请确认相对应的宏是否定义,如成微信,开启__SHARESDK_WECHAT__.其他平台同理,如下图: 修改完成后将项目导成IOS文件.

如何得到QML中的TextArea的slider的位置信息

几天以前,有一个开发者问道如何得到TextArea中的slider的位置信息.目前在QML中的TextArea中并没有这个信息,那么我们如何得到这个信息呢? 1)通过遍历TextArea中的child来得到这个信息 我们可以通过研究TextArea的代码,我们可以发现其中是有一个叫做Flickable的child在里面的.它的里面的contentY含有这个信息,但是可惜的是它不暴露这个信息给我们,那么我们怎么才能得到这个信息呢? 我们设计了如下的测试程序: import QtQuick 2.0

Android 中input event的分析

文章将分析Android 的Input Event 子系统的来龙去脉. Android 系统里面有很多小工具,运行这些工具,我们对它们有一个感性的认识,进而阅读和分析这些小工具源代码,再顺藤摸瓜,就可以把整个子系统的来龙去脉弄清楚. 1.运行toolbox的getevent 工具. # getevent -helpgetevent -helpUsage: getevent [-t] [-n] [-s switchmask] [-S] [-v [mask]] [-p] [-q] [-c count

Vue CLI 3开发中试用UIkit 3组件库

一.UIkit组件库与vuikit简介 在选择好意中的前端开发基本框架后,接下来一个重要任务就是选择一款好的UI组件库.其中,UIkit组件库是一款基于Less+JS的一款轻量级.模块化.响应式的前端UI组件库.特别是,从版本3.0.0 beta 31开始完全脱离了jQuery框架.UIkit组件库的一个重要特点是,其提供的组件大部分是非常基础性的,但是也有一部分组件相当实用,例如Slideshow组件.Upload组件.Video组件等,在github网站上的评价星数是13K,相当不错.另一个

【转】通过制作Flappy Bird了解Native 2D中的Sprite,Animation

作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 引子 上一次我们讲了MonoBehaviour的前世今生,了解了游戏中的每一个GameObjec都是由脚本控制的,这一次我们开始将Unity中Native 2D中的Sprite,并且使用Animation来让Sprite动起来. 在接下来的几篇博客里,我会通过做一个Flappy Bird来讲解Unity中各个组件的使用,项目的源代码在这里:U

【转】通过制作Flappy Bird了解Native 2D中的RigidBody2D和Collider

作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 引子 在第一篇文章[Unity3D基础教程]给初学者看的Unity教程(一):GameObject,Compoent,Time,Input,Physics我已经讲过了一些关于刚体和碰撞的关系,这次我们就通过Flappy Bird这个事例来讲解一下刚体和碰撞体在游戏中的具体应用.相关代码可以参考Flappy Bird的源码. 认识RigidBo

【React Native开发】React Native控件之Touchable*系列组件详解(18)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50630984 本文出自:[江清清的博客] (一)前言 [好消息]个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 今天我们一起来看一下Touchable*系列组件的使用详解,该系列组件包括四种分别为:TouchableHighlight,TouchableNativeFeedback,Touch