React Native TextInput组件输入中文的相关问题

最新推荐文章于 2024-04-18 01:41:27 发布

木大白易

最新推荐文章于 2024-04-18 01:41:27 发布

阅读量2.8k

点赞数

分类专栏： React Native入门文章标签： react-native textinput

本文链接：https://blog.csdn.net/aiynmimi/article/details/84982717

版权

React Native入门专栏收录该内容

19 篇文章 7 订阅

订阅专栏

问题

React Native的TextInput在iOS平台当你设置了value和defaultValue等prop的时候，会发现输入中文，不管用了，会将拼音自动转换为英文字母显示！（Android平台没有这个问题）

在Github上搜索了一下，发现有大量的issue都在说这个事情，不仅中文，在输入韩文，日文的时候会同样存在这个问题！

原因

在这个issue中，@Swordsman-Inaction的回答中：

Enter some random word
Click outside of the TextInput
The textFieldDidChange gets called twice immediately, _nativeEventCount is increased by 2.
The _onChange gets called immediately.
this._inputRef.setNativeProps in _onChange is supposed to set native prop _mostRecentEventCount before the text is rendered, but somehow it didn’t.
So the eventLag is larger than 0, and the correct text could not be set.(Even thought the native UITextField’s text shouldn’t be wrong I think).
Shit happens…

还有就是：textFieldDidChange,onChangeText等回调方法，在输入中文的时候都会回调两次！！！！

解决方案

非正式方案

有一个方案：

export default class MyTextInput extends Component {
  shouldComponentUpdate(nextProps) {

    return Platform.OS !== 'ios' || (this.props.value === nextProps.value &&
      (nextProps.defaultValue === undefined || nextProps.defaultValue === '')) ||
      (this.props.defaultValue === nextProps.defaultValue && (nextProps.value === undefined || nextProps.value == ''));

  }

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