如何在Expo React Native中隐藏WebView唤起的键盘导航栏

方案1：全局配置（优先推荐） #

直接修改Expo项目app.json/app.config.js的iOS端原生配置，可全局隐藏所有场景下的键盘导航栏，包含WebView内输入唤起的键盘：

{
  "expo": {
    "ios": {
      "hideKeyboardAccessoryView": true
    }
  }
}

修改完成后需重新执行expo prebuild并编译自定义开发客户端生效，Expo Go默认不支持该原生配置修改

方案2：适配react-native-keyboard-accessory组件 #

WebView内输入触发的键盘事件默认无法被RN层监听，需要额外添加WebView与RN的通信逻辑，手动控制导航组件的显隐和样式，修改后代码如下：

import { useState } from 'react';
import { View, Button } from 'react-native';
import WebView from 'react-native-webview';
import { KeyboardAccessoryNavigation } from 'react-native-keyboard-accessory';

const Page = () => {
  const [isWebViewInputFocus, setIsWebViewInputFocus] = useState(false);
  
  // 注入WebView的JS逻辑，监听输入框焦点事件
  const injectedJS = `
    document.addEventListener('focus', e => {
      if(['INPUT','TEXTAREA'].includes(e.target.tagName)) {
        window.ReactNativeWebView.postMessage('KEYBOARD_OPEN');
      }
    }, true);
    document.addEventListener('blur', e => {
      if(['INPUT','TEXTAREA'].includes(e.target.tagName)) {
        window.ReactNativeWebView.postMessage('KEYBOARD_CLOSE');
      }
    }, true);
    true;
  `;

  const handleMessage = e => {
    const msg = e.nativeEvent.data;
    if(msg === 'KEYBOARD_OPEN') setIsWebViewInputFocus(true);
    if(msg === 'KEYBOARD_CLOSE') setIsWebViewInputFocus(false);
  };

  return (
    <View style={styles.container}>
        <View style={styles.contentContainer}>
            <Button onPress={checkButton} title="hee"></Button>

            <WebView
                ref={webView}
                javaScriptEnabled={true}
                source={{ uri: 'http://192.168.1.35:3000' }}
                injectedJavaScript={injectedJS}
                onMessage={handleMessage}
                // Android端补充配置
                androidLayerType="hardware"
                androidKeyboardDisplayMode="adjustResize"
            />

            {isWebViewInputFocus && (
              <KeyboardAccessoryNavigation
                  doneHidden={true}
                  nextHidden={true}
                  previousHidden={true}
                  hideBorder={true}
                  style={{ height: 0, opacity: 0, display: 'none' }}
              />
            )}
        </View>
    </View>
  )
}

内容的提问来源于stack exchange，提问作者Roman