在 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 属性。

1. 从“react-native”导入键盘

从“react-native”导入 {Keyboard, TextInput}

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

Keyboard.dismiss()} .../>

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