从 webview 获取（THREE.js）3D 模型到我的 Native-React（增强现实）应用程序答案

【问题标题】：Getting a (THREE.js) 3D model from a webview to my Native-React (augmented reality) app从 webview 获取（THREE.js）3D 模型到我的 Native-React（增强现实）应用程序
【发布时间】：2018-03-05 09:01:25
【问题描述】：

在过去的几周里，我试图弄清楚如何将一个执行 3D 建模（通过 THREE.js）的外部 Web 应用程序包含到一个 viro react 应用程序中。我尝试了 webview 并且有效，但我需要将模型导入到我的 Viro 应用程序中。我尝试了 WebViewBridge 模块（理论上它可以将 .obj 文件作为字符串从 webview 发送到我的应用程序，以便我可以在 AR 中显示它）但它似乎不适用于 Viro 使用的 Native react 版本。

            <View >
                <WebViewBridge                      
                    ref="webviewbridge"                 
                    source={{uri: 'http://www.google.com'}}>
                </WebViewBridge>
            </View>

当我将“webviewbridge”更改为“webview”时，它可以工作，如果我按下按钮，它会在新视图中显示谷歌。我的目标是显示网络应用程序，单击按钮我可以获得呈现的 3D 模型并在增强现实中显示它（viro-react 的一个功能）。

技术信息：

电脑：Windows 10
react-native-cli: 2.0.1
反应原生：0.49.3
Viro-react 测试平台版本：2.4.0
测试设备：Samsung s8 (Android)
Webview 网桥：https://www.npmjs.com/package/react-native-webview-bridge-updated

【问题讨论】：

更新我的 react native 和 javascript 代码可能不是一种选择，它可能会导致版本与我的 Viro-React 模块/框架不匹配。但我不确定这一点，我通过弄乱版本数次破坏了我的应用程序
模块导入似乎工作正常，但它只显示一个黑屏的 webview，如果我将其更改为普通 webview，它将显示一个带有 google 的页面。

标签： react-native three.js react-native-android augmented-reality android-augmented-reality

【解决方案1】：

我的错，它现在使用“injectedJavaScript”道具。

let jsCode = " document.querySelector('#myContent').style.backgroundColor = 'green';";

    return(
            <View style={localStyles.viroContainer}> //this just sets flex to 1


                <WebView
                    source={{ html: "<h1 id='myContent'>Hello</h1>" }}
                    style={{ flex: 1 }} 
                    ref={ webview => { this.webview = webview; }}
                    injectedJavaScript={jsCode}
                    javaScriptEnabled={true}>
                </WebView>

                <TouchableHighlight style={localStyles.overlayButton} 
                    onPress={this.sendMessageToWebView2} underlayColor='transparent'>
                        <Text>Send message to WebView</Text>
                </TouchableHighlight>

            </View>


        );
    }

我现在在按钮单击 (sendmessagetowebview2) 上设法在我的 web 视图中收到带有字符串的警报，但我还没有设法更改注入的 JavaScript。

【讨论】：