React Native WebView html <select> 未在 Android 平板电脑上打开选项答案

【问题标题】：React Native WebView html <select> not opening options on Android tabletsReact Native WebView html <select> 未在 Android 平板电脑上打开选项
【发布时间】：2017-06-18 05:55:45
【问题描述】：

我在 Android 平板电脑上的带有 HTML <select> 标签的 React Native 的 WebView 中遇到了一个非常奇怪的问题。

由于某种原因，点击呈现的<select> 按钮不会打开选项列表。

这仅发生在 Android 平板电脑上，与 Android 版本无关。但是，在 Android 智能手机上，不会出现此错误，并且选项列表会按预期打开。

为了重现这个错误，我创建了一个简单的演示应用程序：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);

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>

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

有谁知道如何让它在 Android 平板电脑上的 React Native WebView 中工作？

【问题讨论】：

好像和这个问题有关：github.com/facebook/react-native/issues/12070
可能是框架的问题，代码对我来说并没有特别错误..
似乎是与操作系统相关的问题。
你使用的是什么版本的 ReactNative？

标签： javascript android react-native android-webview react-native-android

【解决方案1】：

我只是关注这个封闭的issue 的主题，在我看来，有几个解决方案可能对你有用。

首先来自comment Anthony Dunk：

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

我找到的第二个是this from rbravo

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

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

问题已传递给MIGRATED: html select element not working in WebView on android tablets (#12070) #6，但在没有适当解决方案的情况下仍被关闭。这是对The android is Flash back when i use webview in scrollview #477 的引用，该The android is Flash back when i use webview in scrollview #477 也因处于非活动状态超过 2 个月而关闭。

目前可能没有合适的解决方案，但如果其中任何一个对您有用，请告诉我们。

【讨论】：

【解决方案2】：

这个link 解决方案对我有用。为了解决这个问题，请制作一个组件 FixWebView.js 并将其包含在您的 webview 组件中。

示例： FixWebView.js

WebViewScene.js 渲染方法

【讨论】：

一般来说，我们更喜欢以文本形式提供文本材料，而不是文本图像。此处提供了代码格式化工具 - 您可以用您拥有的代码替换这些工具吗？