如何在本机反应中禁用键盘答案

【问题标题】：How to disable keyboard in react native如何在本机反应中禁用键盘
【发布时间】：2018-12-10 15:05:26
【问题描述】：

我创建了一个屏幕键盘组件，我想禁用平台的键盘，我该如何禁用它？

<TextInput
  secureTextEntry
  ref="Pin"
  selectionColor="#656565"
  keyboardType="numeric"
  activeColor="#656565"
  inactiveColor="#fff"
  autoFocus={false}
  ignoreCase
  codeLength={4}
  inputPosition="center"
  size={50}
  onFulfill={isValid => this}
  codeInputStyle={{ borderWidth: 1.5 }}
/>

【问题讨论】：

我认为你可以在这里研究它是如何完成的：github.com/wix/react-native-keyboard-input

标签： react-native

【解决方案1】：

只需像这样在<TextInput> 中写showSoftInputOnFocus={false}：

<TextInput showSoftInputOnFocus={false} />

【讨论】：

这对我有用，谢谢

【解决方案2】：

我也有问题。没有其他解决方案对我有用。这将显示文本输入字段，并且可以单击但不可编辑。

<TouchableOpacity onPress={this.openPinKeyboard}>
  <View pointerEvents="none">
    <Input editable={false} value="1234" />
  </View>
</TouchableOpacity>

【讨论】：

我根本无法使用输入法
这就是重点。你不能编辑，但可以点击它。
他说的是“禁用键盘”而不是“不能编辑它”，那些东西很不一样

【解决方案3】：

我认为您需要添加以下内容：

<TextInput showSoftInputOnFocus={false} keyboardType="numeric" />

【讨论】：

【解决方案4】：

您可以尝试将keyboardType 设置为none，如果不起作用，另一种选择是将editable 属性设置为false。

可以在这里找到可能的答案：https://github.com/facebook/react-native/issues/14045

【讨论】：

【解决方案5】：

将keyboardType 设置为null 对我有用

编辑：

这仅在模拟器中有效，在实际设备上运行时仍会出现本机键盘。

在下面的示例中将<TextInput /> 包装在<TouchableWithoutFeedback> 元素中有效。

<TouchableWithoutFeedback onPress={Keyboard.dismiss} > <TextInput /> </TouchableWithoutFeedback>

【讨论】：

【解决方案6】：

试试这个解决方案，我希望这对 android 和 ios 都有效...

// Step 1: Get Keyboard, TouchableWithoutFeedback from ‘react-native’;
        import { View, TextInput, StyleSheet, Keyboard,  TouchableWithoutFeedback } from 'react-native';

        // Step 2: Create an arrow function to write dismiss keyboard code
        const DismissKeyboard = ({ children }) => (
            <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
                {children}
            </TouchableWithoutFeedback>
            );

        // Step 3: Wrap all TextInput inside <DismissKeyboard> </DismissKeyboard>
        //Example
        <DismissKeyboard>
            <View style={styles.container}>
                <TextInput style={styles.input} placeholder="email" />
                <TextInput style={styles.input} placeholder="password" />
            </View>
        </DismissKeyboard>

【讨论】：

【解决方案7】：

最简单的解决方案是在 TextInput 上使用 onFocus 属性。

从‘react-native’导入Keyboard

导入 {Keyboard, TextInput} 来自 '反应原生'

然后将Keyboard.dismiss() 传递给TextInput onFocus 属性，以阻止键盘在获得焦点时弹出。

Keyboard.dismiss()} .../>

现在通过按下输入字段来测试它是否会弹出键盘

【讨论】：

【解决方案8】：

<TextInput showSoftInputOnFocus={false}/>

这对我有用，有时我需要 onFocus 操作来导航新屏幕，并且不需要键盘打开动画。 Prop Editable 将禁用文本字段，无法按下

【讨论】：