React Native 中 TextInput 组件和中文输入冲突

原文转载自我的 Github 博客

在用 React Native (下称 RN) 开发面向国人的应用时，不可避免会有用户使用中文输入法的情景。在 RN 中，负责输入内容的控件是 <TextInput>，但这个组件有一个截止至 0.41.2 版本都还存在的中文显示 bug。类似的行为在使用英文输入法时并不会出现，所以我在 GitHub 提交了一个没人理的 issue #12599。

复现

完整最小化复现代码在这里。现在只展示 render() 中代码，用于最小化复现，新建一个项目后修改 index.ios.js 即可。

render () {
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.inputField}
        value={this.state.text}
        placeholder="Type here to translate!"
        onChangeText={(text) => this.setState({ text })} />
      <Text style={styles.previewText}>
        {this.state.text}
      </Text>
      <TextInput style={styles.inputField} placeholder="Another to focus, meaningless" />
    </View>
  );
}

猜测原因

这个问题一开始确实比较令人费解，但用一个 <Text> 组件显示了 this.state 内部的内容后，发现了问题可能存在部分—— <Text> 中的文本来源于 this.state.text，而在输入框中文本消失后，<Text> 中的文本并没有一起消失，即我们应该是成功的设置了 this.state.text 的内容，但出于某些原因，输入框的显示有一些问题。

尝试为各个可能涉及更新 this.state 操作的 props 增加了回调用于输出 this.state 内容。操作和 console 中输出的结果如动图。

repro2

render () {
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.inputField}
        value={this.state.text}
        placeholder="Type here to translate!"
        onBlur={(evt) => console.log('onBlur event:', evt.nativeEvent.text)}
        onChange={(evt) => console.log('onChange event:', evt.nativeEvent.text)}
        onChangeText={(text) => this.setState({ text })}
        onSubmitEditing={(evt) => console.log('onSubmitEditing event:', evt.nativeEvent.text)}
        onEndEditing={(evt) => console.log('onEndEditing event:', evt.nativeEvent.text)} />
      <Text style={styles.previewText}>
        {this.state.text}
      </Text>
      <TextInput style={styles.inputField} placeholder="Another to focus, meaningless" />
    </View>
  );
}

可以看出 onBlur 和 onEndEditing 对应的两个回调并没有输出我们预期的结果，而 RN 内部似乎在这一步用 evt.nativeEvent.text 来设定了 <TextInput> 的显示值（也许是 value的值，我没有仔细探究）。

解决办法

知道了是 onBlur 和 onEndEditing 出的问题后，基本可以确定在这一部分加一些 patch 来处理。目前来看在我遇到的情况中 onBlur 和 onEndEditing 是被一起触发的，所以在其中之一进行修复即可。问题可能是 onEndEditing 触发后，我们的 <TextInput> 并未如预期一样更新显示的值（即 props 里的 value ） ，我们希望利用 state 的变化来强制 <TextInput> 重新渲染。

onEndEditing={(evt) => this.setState({ text: evt.nativeEvent.text })} 这一行的引入可以解决这个问题（同时还更改了 onChange 的回调，稍后说明）。

render () {
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.inputField}
        value={this.state.text}
        placeholder="Type here to translate!"
        onChange={(evt) => this.setState({ text: evt.nativeEvent.text })}
        onChangeText={(text) => setTimeout(() => {this.setState({ text: text })})}
        onEndEditing={(evt) => this.setState({ text: evt.nativeEvent.text })} />
      <Text style={styles.previewText}>
        {this.state.text}
      </Text>
      <TextInput style={styles.inputField} placeholder="Another to focus, meaningless" />
    </View>
  );
}

repro3

如果你希望让你的应用看起来不允许中文输入法，可以将 onChange={(evt) => this.setState({ text: evt.nativeEvent.text })} 这一行删掉。视觉效果如下：

repro4

可以看出，这也许不是一个好主意，just FYI