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

注意：我在 android 設備上對此進行了測試，它工作正常。 它在snack.expo上的iOS模擬器中不起作用，不確定是因為模擬器還是react-native錯誤。