jquery - React-Native WebView 不执行 jQuery 代码

Question

我有一个移动网站，我们正在尝试将其集成到一个 android 应用程序中。考虑到它只是一个 webview，这个项目在反应方面应该非常简单。但出于某种原因，从应用程序访问 jQuery 时，它会出现问题。在普通浏览器上，相同的功能效果很好。我在这里发布这个，看看你们是否有解决这个问题的方法，因为我迷路了！

这是我的反应应用程序：

  import React, {Component} from 'react';
  import {View,BackHandler,Platform,} from 'react-native';
  import {WebView} from 'react-native-webview';

  export default class App extends Component {
    constructor(props) {
      super(props);
    }
    webView = {
      canGoBack: false,
      ref: null,
    }

    onAndroidBackPress = () => {
      if (this.webView.canGoBack && this.webView.ref) {
        this.webView.ref.goBack();
        return true;
      }
      return false;
    }

    componentWillMount() {
      if (Platform.OS === 'android') {
        BackHandler.addEventListener('hardwareBackPress', this.onAndroidBackPress);
      }
    }

    componentWillUnmount() {
      if (Platform.OS === 'android') {
        BackHandler.removeEventListener('hardwareBackPress');
      }
    }

    render() {
      return (
        <View style={{flex:1}}>
          <WebView
            ref={(webView) => { this.webView.ref = webView; }}
            onNavigationStateChange={(navState) => { this.webView.canGoBack = navState.canGoBack; }}
            automaticallyAdjustContentInsets={false}
            source={{uri: 'https://xxxxxxx.xxx/mobile/login/'}}
            javaScriptEnabled={true}
            javaScriptEnabledAndroid={true}
            domStorageEnabled={true}
            startInLoadingState={true}
            style={{marginTop: 25}}
          />
      </View>
      )
    }
    
  }

这是我的 package.json 文件

{
  "main": "index.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start"
  },
  "dependencies": {
    "expo": "~42.0.1",
    "expo-splash-screen": "~0.11.2",
    "expo-status-bar": "~1.0.4",
    "expo-updates": "~0.8.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "0.63.4",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-reanimated": "~2.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-unimodules": "~0.14.5",
    "react-native-web": "~0.13.12",
    "react-native-webview": "11.6.2"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },
  "private": true
}

这是访问 webview 时不起作用的代码

<script type="text/javascript">
    $(document).ready(function(){

    function getAjaxData(start, limit, keyword, ajaxUrl, reachedMax=false) {

        if (reachedMax)
            return;

        $.ajax({
            url: ajaxUrl+'?start='+start+'&limit='+limit+'&keyword='+keyword,
            method: 'GET',
            dataType: "json",
            success: function(json){
                //var json = jQuery.parseJSON( response );
                if (json.response == "reachedMax"){
                    reachedMax = true;
                    $(".done").show();
                }else {

                    $(".results").append('<div class="total_results">Result(s): '+json.total+'</div>');

                    $.each(json.ids, function(i, id) {
                        if ($('.id'+id).length === 0) {
                            $(".results").append(json.response[i]);
                        }
                    });

                    if (typeof json.modal !== "undefined"){
                        $(".modalResults").append(json.modal);
                    }
                }
            }
        });
    }

    $(".content_container").on("scroll", function() {
        getAjaxData(start += limit, "1", keyword, '/mobile/ajax_merchant');
    });

    $("body").on("change paste keyup search", ".keywordSearch", function(){
        keyword = $(".keywordSearch").val();
        start ="0";
        limit ="50";
        $('.results').empty();
        getAjaxData(start, limit, keyword, '/mobile/ajax_merchant' );
    });

    var start = 0;
    var limit = 50;
    var reachedMax = false;

    getAjaxData(start, limit, $(".keywordSearch").val(), '/mobile/ajax_merchant' );

});

</script>

上面的代码负责在您键入功能和无限滚动到商家列表时添加搜索。它在浏览器上运行良好。页面加载空结果，一旦触发 getAjaxData()，它就会加载页面中的第一组商家。

在移动应用程序上，页面永远不会触发第一个 getAjaxData() 函数并保持空白结果。此外，当您在搜索字段中键入时，它不会触发该功能。我注意到其他脚本无法正常工作。当你点击一个箭头和类似的东西时，就像一个幻灯片切换。它是非常基本的 jQuery，绝对是验证代码。我是否需要在我的 react-native 代码中添加一些内容以支持 jQuery 事件？

标签： jqueryreact-native