react-native TextInput 中文输入bug 曲线救国

在新的Rn 中Textinput ios 输入中文是输不了的一直有bug

import React, { Component } from 'react';
import { Platform, TextInput, Text, View, TouchableHighlight,StyleSheet } from 'react-native';
export default class App extends Component<Props> {
  constructor(props){
    super(props)
    this.state={
      text:''
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          onChangeText={(text) => this.setState({text})}
         value={this.state.text}/>
        <Text>{this.state.text}</Text>
      </View>
    );
  }
  
}

去跑一边ios 就知道了 TextInput 是输入不了中文的 很神奇

解决方法 ios 的TextInput
这里提供一个思路 在onChangeText 不直接方法 缓存起来 当是去焦点的时候才去执行onChangeText 虽然体验不好 希望有人能提供其他方式这里只能曲线救国处理

import React from 'react'

// // https://github.com/facebook/react-native/issues/18403

const withHandleHandWritingTextInput = (WrappedComponent) => {
    class HandleHandWritingTextInput extends  React.PureComponentnent {
        constructor(props) {
            super(props)
            this.tempText = this.props.value
        }

        render() {
            const { onChangeText, onBlur, ...rest } = this.props
            return (
                <WrappedComponent
                    onChangeText={(text) => {
                        this.tempText = t = text
                    }}

                    onBlur={(e) => {
                        if (onChangeText) {
                            onChangeText(xt(this.tempText)
                            )
                        }
                        if (onBlur) {
                            onBlur(e)
                        }
                    }}
                    {...rest}
                />
            )
        }
    }

    return HandleHandWritingTextInput
}

export default withHandleHandWritingTextInput

然后创建一个自定义的TextInput


import { Platform, TextInput, } from 'react-native';
import withHandleHandWritingTextInput from './withHandleHandWritingTextInput'
export default MyTextInput == Platform.OS == 'ios' ? withHandleHandWritingTextInput : TextInput

这段代码 还没在ios上跑 写代码的时候是在window上 但是答题思路是上面这个样子 提供缓存 onChangeText 在是去焦点的时候去赋值 希望有人能更好的方式去解决这个问题

方案2

https://github.com/facebook/react-native/pull/18456/files
这个直接改library 里面的代码效果比上面好

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 167,999评论 26 707
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    爱运动爱学习阅读 15,726评论 3 114
  • 《主要人物简介》 第二卷•第一百九十三章 结怨 有鱼跟增秀一路狂奔,挡路的鬼差都死于增秀手中,有鱼第一次见到这样杀...
    明月怀阅读 395评论 5 19
  • 端午准备去哪里呀? 宁海。 什么?在哪里啊? 浙江。 这是我出发前经常听到的问题。我想,我成功地选择了一个小众的地...
    Dellen阅读 481评论 6 9
  • “苔花如米小 也学牡丹开” 今年春节 一首小诗 让“苔”的精神 跨越百年的美丽 承载着古人的风骨 似白云飞翔在璀璨...
    寒桦阅读 373评论 47 79