logo标签列表

如何在React Native中禁用键盘

react-native
12

我创建了一个屏幕键盘组件，想要禁用平台自带的键盘，有什么方法可以禁用吗？

<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 }}
/>
我认为你可以学习一下这里的做法：https://github.com/wix/react-native-keyboard-input - Paolo Dell'Aguzzo
10个回答
32

只需要在<TextInput>中添加showSoftInputOnFocus={false}即可，如下所示：

<TextInput showSoftInputOnFocus={false} />
16

我也遇到了问题。其他的解决方案对我都不起作用。这个代码将显示文本输入框，它可以被点击但不能编辑。

<TouchableOpacity onPress={this.openPinKeyboard}>
  <View pointerEvents="none">
    <Input editable={false} value="1234" />
  </View>
</TouchableOpacity>
我无法使用输入。 - Dimitri Kopriwa
这就是关键。你不能编辑，但可以点击它。 - FDisk
他说的是“禁用键盘”，而不是“无法编辑它”，这两件事情非常不同。 - Some Dev
而且，通过按下按钮，您可以显示自定义键盘。通过禁用输入，本地键盘将不会出现，这是主要目标。 - FDisk
7

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

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

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

4

将 keyboardType 设置为 null 对我有效。

编辑：

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

在下面的示例中，将 <TextInput /> 包含在 <TouchableWithoutFeedback> 元素中即可。

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

3
2

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

  1. 从 'react-native' 中导入 Keyboard

import {Keyboard, TextInput} from 'react-native'

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

<TextInput onFocus = {()=> Keyboard.dismiss()} .../>

现在通过点击输入框来测试它，看看键盘是否会弹出。

2

只需将此代码放置在文本输入标签下，这个方法在React Native中对我有效。

              <TextInput
               //this line  
              editable={false}
             />
1

你可以通过 pointerEvents="none" 来实现

<View pointerEvents="none">
           <TextInput
             focusable={false}
             style={{color: '#00000000'}}
             onChangeText={setEmail}
           />
         </View>
1

尝试这个解决方案，我希望它适用于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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接