在 Android 和 iOS 中隐藏键盘而不失去焦点

Question

我在 react-native 中有一个 text-input，我想在输入字段上应用我的自定义键盘并在焦点上隐藏软键盘。我尝试将 showSoftInputOnFocus 设置为 false，但此道具仅在 Android 上可用。我怎样才能做到这一点？我的 textinput 看起来像这样


    <Text style={styles.symbol}>$</Text>
                  <TextInput
                    onFocus={() => onFocus('salesPrice')}
                    value={tabDetails.salesPrice}
                    onChangeText={value => onStateChange('salesPrice', value)}
                    placeholderTextColor={colors.placeholderColor}
                    placeholder={constants.common.zeroPlaceholder}
                    showSoftInputOnFocus={false}
                    style={styles.textInput}
                    onEndEditing={event =>
                      onEndEditing('salesPrice', event.nativeEvent.text)
                    }
                  />

Answer 1

对于仍在寻找答案的任何人，您可以像这样在 Android 上隐藏键盘
在你的 android\app\src\main\java\com\yourappname 中创建这个文件
1. KeyboardModule.java

package com.costsfirst;

import android.app.Activity;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.util.Map;
import java.util.HashMap;

public class KeyboardModule extends ReactContextBaseJavaModule {

    public KeyboardModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "KeyboardFunctionalities";
    }

    @ReactMethod
    public void hideKeyboard() {
        final Activity activity = getCurrentActivity();
        InputMethodManager imm = (InputMethodManager) activity.getSystemService(Activity.INPUT_METHOD_SERVICE);
        View view = activity.getCurrentFocus();
        if (view == null) {
            view = new View(activity);
        }
        imm.hideSoftInputFromWindow(view.getWindowToken(), 0);
    }
}

2. KeyboardPackage.java

package com.costsfirst;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class KeyboardPackage implements ReactPackage {

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new KeyboardModule(reactContext));

        return modules;
    }

}

3. 在您的 MainApplication.java 中执行此更改

@Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          packages.add(new RNCustomKeyboardPackage());
          packages.add(new KeyboardPackage());
          return packages;
        }

现在您可以在 textInput 的焦点上调用它，例如

import { TextInput, NativeModules } from "react-native"

render(){
  return(
    <TextInput onFocus={() => NativeModules.KeyboardFunctionalities.hideKeyboard() } />
  )
}

Answer 2

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

从“react-native”导入键盘

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

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

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

现在测试输入字段，按下它以查看键盘是否会弹出

在 Android 和 iOS 中隐藏键盘而不失去焦点

Hide keyboard in Android and iOS without loosing focus

textinput

react-native