【问题标题】:How to enable and disable the done button in keyboard in react native如何在本机反应中启用和禁用键盘中的完成按钮
【发布时间】:2021-08-25 04:29:53
【问题描述】:

在我想要动态启用/禁用键盘上的完成按钮的文本输入的 react-native 应用程序中。尝试使用 enablesReturnKeyAutomatically 但没有用,因为这些只允许在输入中没有文本时禁用完成按钮。在这里我想动态启用/禁用。谁能给我一些解决它的建议。非常感谢任何帮助,在此先感谢。

【问题讨论】:

    标签: android ios react-native


    【解决方案1】:

    import React from "react";
        import { SafeAreaView, StyleSheet, TextInput,Button,Keyboard } from "react-native";
        
        const UselessTextInput = () => {
          const [text, onChangeText] = React.useState("Useless Text");
          const [number, onChangeNumber] = React.useState(null);
        const [done,setDone]=React.useState(false)
          return (
            <SafeAreaView>
             
              <TextInput
                style={styles.input}
                enablesReturnKeyAutomatically={done}
                onChangeText={onChangeNumber}
                value={number}
                placeholder="useless placeholder"
              />
              <Button title={'Toggle Done'} onPress={()=>{Keyboard.dismiss();setDone(!done)}}/>
            </SafeAreaView>
          );
        };
        
        const styles = StyleSheet.create({
          input: {
            height: 40,
            margin: 12,
            borderWidth: 1,
            padding: 10,
          },
        });
        
        export default UselessTextInput;
    

    【讨论】:

    • 这是关闭键盘,但我想禁用键盘上的返回按钮
    【解决方案2】:

    你不能,不可靠。 Android 中的键盘是一个单独的应用程序(实际上是任意数量的应用程序之一,因为它们可以由 OEM 或用户替换)。它决定显示哪些键,以及每个键的作用。你可以给它提示,但没有什么可以强迫它服从这些提示。如果键盘应用程序决定要显示返回键,它会。如果没有通过提示(例如完成、下一步、搜索等)明确告知它们显示操作键,大多数键盘应用程序都会显示返回键。我不知道有什么东西会使它成为无功能或消失的钥匙。

    Android 键盘界面确实不能很好地在键盘已经启动时动态更改键。一些键盘可能会使用它,但很多不会。除非焦点文本视图发生变化,否则许多不会作为明确的选择。从键盘开发人员的角度来看,这是有充分理由的。

    基本上,如果您要从键盘上寻找一些非常具体的行为,您可能不会得到它。或者你会找到一些方法让它在你的测试设备上的键盘上工作,但它会在其他设备上失败。而在 React Native 中做这件事会更加困难,因为他们做键盘的方法并不能很好地映射到 Android 实际做键盘的方式。

    【讨论】:

      猜你喜欢
      • 2018-12-10
      • 1970-01-01
      • 2019-06-24
      • 2023-03-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多