React Native WebView html <select>无法在Android平板电脑上打开选项

Question

React Native WebView html <select>无法在Android平板电脑上打开选项

huo*_*erv 42 javascript android android-webview react-native react-native-android

我<select>在Android平板电脑上使用HTML 标签在React Native的WebView中遇到了一个非常奇怪的问题.出于某种原因,点击渲染<select>按钮不会打开选项列表.

这只发生在Android平板电脑上,无论Android版本如何.但是,在Android智能手机上,不会发生此错误,并且选项列表会按预期打开.

为了重现这个bug,我创建了一个简单的演示应用程序:https://github.com/huonderv/react-native-webview-html-select-bug.

重要的代码如下:

index.android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  WebView
} from 'react-native';

export default class WebViewProject extends Component {
  render() {
    return (
      <WebView
        style={styles.container}
        source={{ uri: 'file:///android_asset/simpleselect.html'}}
        startInLoadingState={true}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

AppRegistry.registerComponent('WebViewProject', () => WebViewProject);

Run Code Online (Sandbox Code Playgroud)

simpleselect.html

<!DOCTYPE html>
<html>
  <body>    
    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>

  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

我还尝试用Crosswalk替换WebView,如下所述:https://github.com/grovertb/react-native-crosswalk-webview.但是,这并没有解决这个问题.

有谁知道如何在Android平板电脑上使用React Native WebView？

Answer 1

Col*_*rus 2

我只是沿着这个已关闭问题的线索进行跟踪，在我看来，有一些解决方案可能适合您。

首先来自安东尼·邓克的评论：

将类“needsclick”添加到选择中为我在 Android 上解决了这个问题。

我发现的第二个是 rbravo的

我通过检测何时在 webview 内的页面上单击任何选择元素（通过注入一些 js 并使用 postMessage）在我的项目中修复了它，然后在 1ms 超时内将 webview 的大小调整了 1px（并再次恢复到原始大小）。这触发了渲染方法，并且本机选择菜单位于 Web 视图之上（因为整个问题是本机菜单在 Web 视图后面打开并且未显示）。这对我有用！

但话又说回来，有些人声称共享的任何解决方案都不适合他们。

该问题已传递给MIGRATED: html select element not working in WebView on android iPads (#12070) #6，并且仍然在没有适当解决方案的情况下关闭。这被引用到当我在滚动视图中使用 webview 时，android 会闪回 #477，该视图也因不活动超过 2 个月而关闭。

目前可能没有合适的解决方案，但请告诉我们其中是否有适合您的解决方案。

归档时间：	8 年，10 月前
查看次数：	1099 次
最近记录：	6 年，1 月前