Question

场景我创建了一个test app，它是通过npx create-react-app my-app-name ...开始的，然后是通过npm run build构建的。 reactJS应用程序可在桌面浏览器上运行，但我的iPhone（iOS 9.3.2）上出现黑屏；在手机上，我已经在Safari和Google Chrome的最新更新上进行了测试。

其他测试

移动模拟器运行正常
该应用程序在iOS 11 +上运行良好（已通过iPhone 5S测试）
该应用程序可在Android 5及更高版本上运行
该应用程序可在Windows Mobile 10的Edge上运行

来自研究 -我看到了existing question，脚本在应用程序之后加载，如您在我的HTML （如下）

中所见

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <meta name="theme-color" content="#000000" />
  <link rel="manifest" href="/manifest.json" />
  <title>Akber Iqbal | About(React)</title>
  <link href="/static_about/css/main.314f812b.chunk.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <script src="/static_about/js/2.c65df5fc.chunk.js"></script>
  <script src="/static_about/js/main.cd9a0ba3.chunk.js"></script>
  <script>
    ! function(l) {
      function e(e) {
        for (var r, t, n = e[0], o = e[1], u = e[2], f = 0, i = []; f < n.length; f++) t = n[f], p[t] && i.push(p[t][0]), p[t] = 0;
        for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (l[r] = o[r]);
        for (s && s(e); i.length;) i.shift()();
        return c.push.apply(c, u || []), a()
      }

      function a() {
        for (var e, r = 0; r < c.length; r++) {
          for (var t = c[r], n = !0, o = 1; o < t.length; o++) {
            var u = t[o];
            0 !== p[u] && (n = !1)
          }
          n && (c.splice(r--, 1), e = f(f.s = t[0]))
        }
        return e
      }
      var t = {},
        p = {
          1: 0
        },
        c = [];

      function f(e) {
        if (t[e]) return t[e].exports;
        var r = t[e] = {
          i: e,
          l: !1,
          exports: {}
        };
        return l[e].call(r.exports, r, r.exports, f), r.l = !0, r.exports
      }
      f.m = l, f.c = t, f.d = function(e, r, t) {
        f.o(e, r) || Object.defineProperty(e, r, {
          enumerable: !0,
          get: t
        })
      }, f.r = function(e) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
          value: "Module"
        }), Object.defineProperty(e, "__esModule", {
          value: !0
        })
      }, f.t = function(r, e) {
        if (1 & e && (r = f(r)), 8 & e) return r;
        if (4 & e && "object" == typeof r && r && r.__esModule) return r;
        var t = Object.create(null);
        if (f.r(t), Object.defineProperty(t, "default", {
            enumerable: !0,
            value: r
          }), 2 & e && "string" != typeof r)
          for (var n in r) f.d(t, n, function(e) {
            return r[e]
          }.bind(null, n));
        return t
      }, f.n = function(e) {
        var r = e && e.__esModule ? function() {
          return e.default
        } : function() {
          return e
        };
        return f.d(r, "a", r), r
      }, f.o = function(e, r) {
        return Object.prototype.hasOwnProperty.call(e, r)
      }, f.p = "/";
      var r = window.webpackJsonp = window.webpackJsonp || [],
        n = r.push.bind(r);
      r.push = e, r = r.slice();
      for (var o = 0; o < r.length; o++) e(r[o]);
      var s = n;
      a()
    }([])
  </script>
</body>

</html>

在我的代码中，我仅在2个地方使用过箭头功能...

在 ComponentDidMount（）

中

fetch(stackOverflowURL)
  .then(initialRes => initialRes.json())
  .then(
    arrayRes => { this.setState({ error: null, isLoaded: true, stackOverflowItems: arrayRes.items[0] }); }
    , errr => { this.setState({ error: errr, isLoaded: false }); console.log(errr); }
  );

我还在 render（）

中使用了箭头功能

   if (this.state.isLoaded) {
      const getItems = this.state.aiArticles.map((item, index) => {
      return ( 
        <div className="aiArticle" key={index}> 
          <img src={item.imgsrc} alt={item.alttext} className="img-responsive" />
          <h3 className="articleHeading"> <a href={item.articlelink}>{item.articleheading}</a> </h3>
          <p>{item.publisheddate}</p>
        </div>)
      })
      return <div>{getItems}</div>
    } else { 
      return <p>Wait for the rest Api to load the articles </p>
    }

问题： 有没有解决方法可以让该应用在旧设备上运行？

屏幕截图

ReactJS应用在旧版iPhone iOS 9.3.2上显示为空白

0 个答案: