react-native - react-native tTextInput 以大写开头，但可以关闭

Question

我想创建一个以大写开头的 TextInput，但如果它被用户关闭，它就会保持关闭状态。

autoCapitilisation 道具提供“字符”，但即使用户已将其关闭，它也会在每个新字符后继续运行，如果我选择“单词”，那么它会在第一个字符后自动保留大写 :(

Answer 1

您可以根据键盘的事件切换autoCapitalization道具，正确的方法是监听Shift键，但监听器似乎不支持键onKeyPress。所以在这个解决方案中，我检查输入的字符是否在小写字母范围内，然后切换autoCapitalization到none并将其设置为characters每当显示键盘时。

import React from "react";
import { SafeAreaView, StyleSheet, TextInput, Keyboard } from "react-native";

const AutoCapitalizeTextInput = () => {
  const [text, onChangeText] = React.useState("Useless Text");
  const [autoCapitalize, setAutoCapitalize] = React.useState("characters");
  const onKeyPress = (event) => {
    const key = event.nativeEvent.key;
    if(/[a-z]/.test(key) && key.length === 1) {
      setAutoCapitalize("sentences");
    }
  }

  const _keyboardDidShow = () => setAutoCapitalize("characters");

  React.useEffect(() => {
    Keyboard.addListener("keyboardDidShow", _keyboardDidShow);

    // cleanup function
    return () => {
      Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
    };
  }, []);

  return (
    <SafeAreaView>
      <TextInput
        onKeyPress={onKeyPress}
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
        autoCapitalize={autoCapitalize}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  ...
});

export default AutoCapitalizeTextInput;

https://snack.expo.io/@diedu89/textinput-autocapitalize

注意：我在安卓设备上进行了测试，它工作正常。它在 snap.expo 上的 iOS 模拟器中不起作用，不确定是因为模拟器还是 react-native 错误。