在“TextInput”中同時顯示“返回”按鈕和“完成”按鈕的問題

Question

問題：在 React Native 中使用“TextInput”顯示鍵盤，按回車鍵后，cursor 移到新行，但是此時我沒有“完成”按鈕來隱藏鍵盤。

同樣，有一個名為“returnKeyType={done}”的道具，它添加了“完成”按鈕，但現在“返回”按鈕不見了。我相信用戶可以點擊“TextInput”框中的新行，但它似乎突出顯示了輸入的單詞.

解決方案嘗試：就像在數字鍵盤中一樣，我認為應該有一些道具可以在鍵盤頂部添加“完成”按鈕，這樣我們就可以同時看到“返回”和“完成”按鈕，但我找不到它。

...另一種選擇是我可以使用完成按鈕創建自己的組件，並將鍵盤包裝為子組件，但我不知道該怎么做。

這是基本組件，我相信一定有一些優雅的方法來做到這一點。 任何幫助表示贊賞。

Answer 1

你不能同時完成和換行按鈕。 鍵盤上應該只有一個提交按鈕。

但是您可以進行類似的解決。

自定義按鈕

第一個選項是像您提到的那樣制作自定義按鈕。 在您的文本字段旁邊或鍵盤上方制作一個“完成”按鈕。

onSubmit編輯

第二個選項是使用onSubmitEdit

制作一個自定義 function 來控制返回按鈕應該做什么。

例如）

const [textInputValue, setTextInputValue] = useState("");

const returnPressed = () => {
    if(need_new_line){
        setTextInputValue(textInputValue+"\n");
    } else {
        returnFunction();
    }
};

return (
    <TextInput
        value={textInputValue}
        onChangeText={(text)=> setTextInputValue(text)}
        onSubmitEditing={()=> returnPressed()}
    />
);