Autodesk Forge Viewer API 在 React Native 中不起作用答案

【问题标题】：Autodesk Forge Viewer API not working in React NativeAutodesk Forge Viewer API 在 React Native 中不起作用
【发布时间】：2020-04-29 07:46:33
【问题描述】：

几天前，我尝试通过以下示例构建 Autodesk forge 查看器 API 与本机反应： https://forge.autodesk.com/blog/forge-react-native-au-talk

效果很好。它使用了查看器 v2.17，我使用了查看器 v7，但不幸的是，它没有显示任何内容。我发现了一个错误：当我使用 line viewer.start(); 时无法读取 null 的属性“纹理”；

请帮忙

【问题讨论】：

升级到 v7 后如何初始化查看器（发布代码，代码 here 不再适用于 v7）？你关注here了吗？你的代码是在普通的旧浏览器中工作的吗？

标签： react-native autodesk-forge

【解决方案1】：

这是我的 HTML，我为查看器 v7 修改了它，但我收到了类似上面的错误。感谢您的帮助

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <link rel="stylesheet" href="https://developer.api.autodesk.com/derivativeservice/v2/viewers/style.min.css?v=v7.*" type="text/css">
  <script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/three.min.js?v=v2.17"></script>
  <script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/viewer3D.js?v=v7.*"></script>
</head>

<body style="margin:0">
  <div id="viewer"></div>
</body>
<script>
  var viewer = null;

  function initializeViewer(urn, token) {
    var options = {
      env: "AutodeskProduction",
      accessToken: token
    }
    Autodesk.Viewing.Initializer(options, () => {
      try {
        viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('viewer'));
        viewer.start();
      } catch (err) {
        alert(err)
      }
      var documentId = urn;
      Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
    });

    function onDocumentLoadSuccess(doc) {
      var viewables = doc.getRoot().getDefaultGeometry();
      viewer.loadDocumentNode(doc, viewables).then(i => {
        // documented loaded, any action?
      });
    }

    function onDocumentLoadFailure(viewerErrorCode) {
      console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
    }
  }
</script>

【讨论】：

【解决方案2】：

查看您的代码，在我看来，您在初始化时没有正确使用查看器选项。根据 Bryan 发布的示例，定义访问令牌的方法是通过回调。使用查看器下方的代码加载正常。

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <link rel="stylesheet" href="https://developer.api.autodesk.com/derivativeservice/v2/viewers/style.min.css?v=v7.*" type="text/css">
  <script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/three.min.js?v=v2.17"></script>
  <script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/viewer3D.js?v=v7.*"></script>
</head>

<body style="margin:0">
  <div id="viewer"></div>
</body>
<script>
  var viewer = null;
  function initializeViewer(urn, token) {
    var options = {
      env: "AutodeskProduction",
      getAccessToken: function(onTokenReady) {
        var token = 'access token provided by 2 legged api';
        var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
        onTokenReady(token, timeInSeconds);
      }
    }
    Autodesk.Viewing.Initializer(options, () => {
      try {
        viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('viewer'));
        viewer.start();
        console.log('viewer loaded');
      } catch (err) {
        alert(err)
      }
    });

    function onDocumentLoadSuccess(doc) {
      var viewables = doc.getRoot().getDefaultGeometry();
      viewer.loadDocumentNode(doc, viewables).then(i => {
        // documented loaded, any action?
      });
    }

    function onDocumentLoadFailure(viewerErrorCode) {
      console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
    }
  }
</script>

【讨论】：