web-dev-qa-db-ja.com

ReactネイティブWebViewhtml <select>がAndroidタブレットでオプションを開かない

React Native's WebView with HTML <select> tags on Androidタブレットで非常に奇妙な問題が発生しています。

何らかの理由で、レンダリングされた<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 。しかし、これはこの問題を解決しませんでした。

ReactネイティブWebView Androidタブレットでこれを機能させる方法を知っている人はいますか？

javascriptandroidreact-nativeandroid-webviewreact-native-android
43
huonderv

私はこの閉じたものからスレッドをたどっています issue そしてあなたのために働くかもしれないいくつかの解決策があるように私には思えます。

最初はこれからです コメント by Anthony Dunk ：

選択にクラス「needsclick」を追加すると、Androidでこの問題が修正されました。

私が見つけた2番目は this from rbravo

選択した要素がWebビュー内のページでクリックされたことを検出して（jsを挿入してpostMessageを使用して）プロジェクトで修正し、1msのタイムアウトでWebビューのサイズを1px変更しました（そして元のサイズに戻しました）。これにより、renderメソッドがトリガーされ、ネイティブ選択メニューがWebビューの上に表示されました（問題全体は、ネイティブメニューがWebビューの背後で開き、表示されないことであったため）。それは私のために働いた！

しかし、繰り返しになりますが、共有されたソリューションのいずれもが機能しないと主張する人もいます。

問題は 移行：html select要素がAndroidタブレット（＃12070）＃6 のWebViewで機能しないが、適切な解決策なしで閉じられた。参照されました Androidはscrollview＃477でwebviewを使用するとフラッシュバックします これも2か月以上非アクティブであったためにクローズされました。

現在、これに対する適切な解決策はないかもしれませんが、それらのいずれかがあなたのために働いたかどうか私たちに知らせてください。

1
Cold Cerberus

この リンク ソリューションは私のために働いた。この問題を解決するには、コンポーネントFixWebView.jsを作成し、それをWebviewコンポーネントに含めます。

例：FixWebView.js

FixWebView.js

WebViewScene.jsレンダリングメソッド

WebViewScene Render Method

0
Dheeraj Chaudhary