如何使用 React 在 FB Instant Games 中正确加载图像？

Question

我想将 Facebook Instant Games 与用 React 编写的简单游戏结合使用。问题是图像不会被加载。

下面是来自 React CRA 构建的 index.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" />
  <meta name="theme-color" content="#000000" />
  <link rel="manifest" href="/manifest.json" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <title>My Bicoin Clicker</title>
  <link href="static/css/2.39017165.chunk.css" rel="stylesheet">
  <link href="static/css/main.ea0e7ff0.chunk.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></script>
  <script>
    window.onload = function() {
      FBInstant.intializeAsync().then(() => {
        // load your game
        return FBInstant.startGameAsync();
      }).then(() => {
        // Once all assets are loaded, tells the SDK
        // to end loading view and start the game
        FBInstant.startGameAsync()
          .then(function() {
          // Retrieving context and player information can only be done
          // once startGameAsync() resolves
          var contextId = FBInstant.context.getID();
          var contextType = FBInstant.context.getType();

          var playerName = FBInstant.player.getName();
          var playerPic = FBInstant.player.getPhoto();
          var playerId = FBInstant.player.getID();

          // Once startGameAsync() resolves it also means the loading view has
          // been removed and the user can see the game viewport

          game.start();
        });
      })
    }
  </script>
  <script>!function (f) { function e(e) { for (var r, t, n = e[0], o = e[1], u = e[2], i = 0, l = []; i < n.length; i++)t = n[i], a[t] && l.push(a[t][0]), a[t] = 0; for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (f[r] = o[r]); for (s && s(e); l.length;)l.shift()(); return p.push.apply(p, u || []), c() } function c() { for (var e, r = 0; r < p.length; r++) { for (var t = p[r], n = !0, o = 1; o < t.length; o++) { var u = t[o]; 0 !== a[u] && (n = !1) } n && (p.splice(r--, 1), e = i(i.s = t[0])) } return e } var t = {}, a = { 1: 0 }, p = []; function i(e) { if (t[e]) return t[e].exports; var r = t[e] = { i: e, l: !1, exports: {} }; return f[e].call(r.exports, r, r.exports, i), r.l = !0, r.exports } i.m = f, i.c = t, i.d = function (e, r, t) { i.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t }) }, i.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, i.t = function (r, e) { if (1 & e && (r = i(r)), 8 & e) return r; if (4 & e && "object" == typeof r && r && r.__esModule) return r; var t = Object.create(null); if (i.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: r }), 2 & e && "string" != typeof r) for (var n in r) i.d(t, n, function (e) { return r[e] }.bind(null, n)); return t }, i.n = function (e) { var r = e && e.__esModule ? function () { return e.default } : function () { return e }; return i.d(r, "a", r), r }, i.o = function (e, r) { return Object.prototype.hasOwnProperty.call(e, r) }, i.p = "/bitcoin-clicker/"; 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; c() }([])</script>
  <script src="static/js/2.2571fbb6.chunk.js"></script>
  <script src="static/js/main.47fd302c.chunk.js"></script>
</body>

</html>

CSS 加载正常，redux 动作也是如此。

Answer 1

问题是 package.json "homepage" 中的路径设置为 github 上的存储库。它是通过包托管的 gh-pages 应该是：

  "homepage": ".",

而且效果很好。

如何使用 React 在 FB Instant Games 中正确加载图像？

How to load images in FB Instant Games correctly with React?

facebook-javascript-sdk

reactjs

redux

facebook-instant-games