React Native 在“TextInput”中同时显示“返回”按钮和“完成”按钮的问题

xfb7svmp  于 2023-01-18  发布在  React
关注(0)|答案(1)|浏览(231)

问题:在react native中使用“TextInput”显示键盘,按回车键时,光标移动到新行,但此时我没有“done”按钮来隐藏键盘。
同样,有一个名为“returnKeyType={done}”的 prop ,它添加了“done”按钮,但现在“return”按钮不见了。我相信用户可以点击“TextInput”框内的新行,但它似乎突出显示了键入的单词。
解决方案尝试:就像数字键盘一样,我想应该有一些 prop 在键盘顶部添加“完成”按钮,这样我们就可以同时看到“返回”和“完成”按钮,但我找不到它。
...另一个选择是我可以创建自己的组件与完成按钮,并 Package 键盘作为儿童,但我不知道我怎么做。
这是基本的组成部分,我相信一定有一些优雅的方式来做到这一点。任何帮助是赞赏。

ryhaxcpt

ryhaxcpt1#

您不能同时使用完成和换行按钮。键盘上应该只有一个提交按钮。
但是你可以做一个类似的工作。

自定义按钮

第一个选择是像你提到的那样制作自定义按钮。在你的文本框旁边或键盘上方制作一个“完成”按钮。

提交时编辑

第二个选项是使用onSubmitEdit
做一个自定义函数来控制返回按钮应该做什么。
例如)

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

相关问题