如何将<webview>集中在本机中?

时间:2018-04-25 14:19:04

标签: react-native

我正在寻找一种方法来自动聚焦输入/ textarea字段或触发React Native中WebView组件内部的点击。自动对焦背后的目标是确保键盘立即弹出......

有没有人有任何想法?打开或关闭键盘的提示也很有用......

我还在这里提出了一个问题:https://github.com/facebook/react-native/issues/18965

3 个答案:

答案 0 :(得分:3)

请参阅https://facebook.github.io/react-native/docs/webview.html#injectedjavascript

您可以在WebView页面上执行任何javascript

答案 1 :(得分:1)

更新:自从发布此消息后,有人创建了此模块,其中包含“自动对焦”:https://github.com/TryImpossible/react-native-enhance-webview (对于解决方案2)

在研究了一下之后我看到了2个解决方案。

  1. Fork React Native并调整WebView组件。
  2. 要获得支持WebView的以下更改需要应用于https://github.com/facebook/react-native/blob/6e359c4589b0627de59332ce56fe28804425a609/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java#L545

        view.loadUrl(url, headerMap);
        view.requestFocus();
        return;
    

    添加的 view.requestFocus(); 将重点关注WebView。之后在WebView中,您需要在某些HTML元素上调用.focus()

    1. 第二个解决方案是基于WebView编写自定义本机组件,这是一个更简单的解决方案,因为分支和重建React Native有点工作......
    2. 帮助解决这个问题的最佳资源是遵循这两篇文章:

      https://lakshinkarunaratne.wordpress.com/2018/01/22/enhancing-the-react-native-webview-part-1-supporting-file-uploads-in-ios-android/

      https://lakshinkarunaratne.wordpress.com/2018/03/11/enhancing-the-react-native-webview-part-2-supporting-file-downloads-in-android/

      本机组件中最重要的文件是AdvancedWebviewManager.java。在那里,您可以覆盖或定义一个新的source方法,该方法会在加载网址后调用.requestFocus()

      package your.package.advancedwebview;
      
      import android.webkit.WebView;
      
      import javax.annotation.Nullable;
      import com.facebook.react.bridge.ReadableMap;
      import com.facebook.react.bridge.ReadableMapKeySetIterator;
      import com.facebook.react.uimanager.annotations.ReactProp;
      import com.facebook.react.views.webview.ReactWebViewManager;
      
      import java.io.UnsupportedEncodingException;
      import java.util.HashMap;
      import java.util.Locale;
      
      public class AdvancedWebviewManager extends ReactWebViewManager {
          public WebView webview = null;
      
          public static final String REACT_CLASS = "AdvancedWebview";
      
          private AdvancedWebviewPackage aPackage;
          public String getName() {
              return REACT_CLASS;
          }
      
          @ReactProp(name = "sourceFocus")
          public void setSource(WebView view, @Nullable ReadableMap source) {
              if (source != null) {
                  if (source.hasKey("html")) {
                      String html = source.getString("html");
                      if (source.hasKey("baseUrl")) {
                          view.loadDataWithBaseURL(
                                  source.getString("baseUrl"), html, HTML_MIME_TYPE, HTML_ENCODING, null);
                      } else {
                          view.loadData(html, HTML_MIME_TYPE, HTML_ENCODING);
                      }
                      return;
                  }
                  if (source.hasKey("uri")) {
                      String url = source.getString("uri");
                      String focusKeyboard = source.getString("focusKeyboard");
                      String previousUrl = view.getUrl();
                      if (previousUrl != null && previousUrl.equals(url)) {
                          return;
                      }
                      if (source.hasKey("method")) {
                          String method = source.getString("method");
                          if (method.equals(HTTP_METHOD_POST)) {
                              byte[] postData = null;
                              if (source.hasKey("body")) {
                                  String body = source.getString("body");
                                  try {
                                      postData = body.getBytes("UTF-8");
                                  } catch (UnsupportedEncodingException e) {
                                      postData = body.getBytes();
                                  }
                              }
                              if (postData == null) {
                                  postData = new byte[0];
                              }
                              view.postUrl(url, postData);
                              return;
                          }
                      }
                      HashMap<String, String> headerMap = new HashMap<>();
                      if (source.hasKey("headers")) {
                          ReadableMap headers = source.getMap("headers");
                          ReadableMapKeySetIterator iter = headers.keySetIterator();
                          while (iter.hasNextKey()) {
                              String key = iter.nextKey();
                              if ("user-agent".equals(key.toLowerCase(Locale.ENGLISH))) {
                                  if (view.getSettings() != null) {
                                      view.getSettings().setUserAgentString(headers.getString(key));
                                  }
                              } else {
                                  headerMap.put(key, headers.getString(key));
                              }
                          }
                      }
                      view.loadUrl(url, headerMap);
                      if (focusKeyboard.equals("focus")) {
                          view.requestFocus();
                      }
                      return;
                  }
              }
              view.loadUrl(BLANK_URL);
          }
      
      
          public void setPackage(AdvancedWebviewPackage aPackage){
              this.aPackage = aPackage;
          }
      
          public AdvancedWebviewPackage getPackage(){
              return this.aPackage;
          }
      }
      

      这基本上复制并扩展了ReactWebViewManager.java文件:https://github.com/facebook/react-native/blob/6e359c4589b0627de59332ce56fe28804425a609/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java#L545

答案 2 :(得分:0)

在最新版本的react-native-webview中,WebView获得了方法requestFocus()。尚未记录,请谨慎使用。

我也在寻找解决方案,它在Android上运行良好。

https://github.com/react-native-community/react-native-webview/commit/6f053bad7be666d09b49e403931656d6b4fa410a#diff-bad447a30759e328812e9bae6798621cR21