天天看点

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

在新的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/

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 里面的代码效果比上面好

rn