React Native中如何让<WebView>内元素自动聚焦并唤起键盘？

我之前做项目时刚好碰到过一模一样的需求，折腾了好几种方法，分享几个亲测有效的方案给你：

方案一：注入JavaScript直接触发聚焦 #

这是最直接的方式，利用WebView的injectJavaScript属性，在网页加载完成后注入一段脚本，找到目标输入框并调用focus()方法，强制唤起键盘。

import React, { useRef, useEffect } from 'react';
import { WebView } from 'react-native-webview';

const AutoFocusWebView = () => {
  const webViewRef = useRef(null);

  useEffect(() => {
    // 页面加载完成后执行聚焦脚本
    const focusInputScript = `
      // 替换成你实际的输入框选择器，比如#username或者textarea.comment
      const targetInput = document.querySelector('input, textarea');
      if (targetInput) {
        targetInput.focus();
        // 部分环境下需要手动dispatch事件确保触发
        targetInput.dispatchEvent(new Event('focus'));
      }
    `;
    // 确保WebView实例已挂载再执行注入
    webViewRef.current?.injectJavaScript(focusInputScript);
  }, []);

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: '你的网页地址' }}
      // 必须开启JavaScript支持
      javaScriptEnabled={true}
      // iOS上可选：允许内联脚本执行
      allowsInlineMediaPlayback={true}
    />
  );
};

export default AutoFocusWebView;

⚠️ 注意：如果是本地HTML文件，也可以直接在HTML里给输入框加autofocus属性，但部分WebView环境（尤其是iOS的WKWebView）可能不生效，这时候还是需要用注入脚本的方式兜底。

方案二：通过跨端通信触发聚焦 #

如果网页是你自己开发的，推荐用这种更可控的方式：React Native端通过postMessage给网页发指令，网页端监听消息后执行聚焦操作。

React Native端代码 #

useEffect(() => {
  // 延迟1秒确保网页完全加载完成（时间可根据实际情况调整）
  setTimeout(() => {
    webViewRef.current?.postMessage('trigger-input-focus');
  }, 1000);
}, []);

网页端代码 #

// 在网页的JS中添加监听
window.addEventListener('message', (event) => {
  if (event.data === 'trigger-input-focus') {
    const inputElement = document.querySelector('input[type="text"]');
    inputElement?.focus();
  }
});

键盘控制相关技巧 #

除了唤起键盘，分享几个实用的键盘操作技巧：

• 手动关闭键盘：使用React Native内置的Keyboard API直接关闭键盘

import { Keyboard } from 'react-native';

// 在需要的地方调用
Keyboard.dismiss();

• 监听键盘状态：可以监听键盘的弹出/关闭事件，做对应的布局调整

import { Keyboard } from 'react-native';

useEffect(() => {
  const keyboardShowListener = Keyboard.addListener('keyboardDidShow', () => {
    console.log('键盘已弹出');
    // 比如调整WebView的高度或者滚动位置
  });

  const keyboardHideListener = Keyboard.addListener('keyboardDidHide', () => {
    console.log('键盘已关闭');
    // 恢复布局
  });

  // 组件卸载时移除监听
  return () => {
    keyboardShowListener.remove();
    keyboardHideListener.remove();
  };
}, []);

• Android端布局适配：可以在AndroidManifest.xml中给对应的Activity设置windowSoftInputMode，避免键盘遮挡内容

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustResize">
</activity>

这些方法应该能解决你的问题，我之前在项目里用方案一成功实现了自动唤起键盘的需求，你可以根据自己的网页情况选择合适的方式～

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