我正在寻找一种方法来自动聚焦输入/ textarea字段或触发React Native中WebView组件内部的点击。自动对焦背后的目标是确保键盘立即弹出......
有没有人有任何想法?打开或关闭键盘的提示也很有用......
我还在这里提出了一个问题:https://github.com/facebook/react-native/issues/18965
答案 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个解决方案。
要获得支持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()
。
帮助解决这个问题的最佳资源是遵循这两篇文章:
本机组件中最重要的文件是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上运行良好。