【 React-native 】iOS TextInput limits users to typing only one Chinese character

Such a bizarre demand?

Ex. :

• Complete the name according to the prompts, you can input a Chinese character
• Complete the company name

However, this works fine on Android. On iOS, if you only set the maxLength of TextInput to 1, user pinyin won’t work:

The reproduced version is:

[email protected]
Copy the code

As you can see, when I want to input “hum”, I need to type “Heng” in pinyin. But due to this Bug, I can only input “H”, which is also caused by iOS offset printing displayed in the input box. Then turn the pages. This is obviously not what we want! So a compromise was chosen:

When the user enters a Chinese character, only the first one is retrieved! As follows:

import React, { useState } from "react";
import { View, TextInput, Platform } from "react-native";

export default function LoginPage() {
  const [input, setInput] = useState("");
  return (
    <View style={{ flex: 1.marginTop: 50}} >
      <TextInput
        maxLength={Platform.OS= = ="android" ? 1 : 99}
        value={input}
        onChangeText={text= >{/ / when the Chinese first if (text. The match (/ ^ [\ u4e00 - \ u9fa5] + $/)) {setInput (text [0]). } else { setInput(text); }}} / ></View>
  );
}
Copy the code