so many years, it alaways not fix for CJK.

0
open
marlti7
marlti7
Posted 3 months ago

so many years, it alaways not fix for CJK. #32400

Note that this is no longer valid, it only works on React Native version: 0.41.2. Pay attention to the last updated date before you downvote a comment.

I'll give a workaround which can fix the problem with both my original project and this reproduction project. The only modified part is inside the render() method. Check it below

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>
  );
}

Basically, setTimeout did the trick but I am not sure why. And I think the bug I mentioned in this issue is still worth to figure out and fix.

repro3

If you want to make your app looks like not allow Chinese input method, you can remove this line onChange={(evt) => this.setState({ text: evt.nativeEvent.text })}. It will look like this:

repro4

Though I don't think this is a good idea, just FYI.

Originally posted by @Kulbear in https://github.com/facebook/react-native/issues/12599#issuecomment-282995911