从 webview 导航到 react native 页面答案

【问题标题】：navigate to a react native page from webview从 webview 导航到 react native 页面
【发布时间】：2019-03-13 08:33:17
【问题描述】：

我有一个使用 webView 呈现 html 代码的 react 本机应用程序，我使用 postmessage 在它们之间进行通信。 webview 将发送消息以反应原生以打开另一个反应原生页面（例如发送消息“打开登录页面”），所以我将在 onMessage（事件）中收到它，然后当我想使用 this.props.navigateTo 它说“无法阅读”未定义的属性 navigateTo 。我使用了console.log(this) 并理解'this' 是DedicatedWorkerGlobalScope，我不能使用navigatTo()。在这种情况下我如何使用 navigatTo（当我在 DedicatedWorkerGlobalScope 中时）或者我如何关闭或停止渲染 webview 来做到这一点？

  onMessage( event ) {
    let post = JSON.parse(event.nativeEvent.data);
    console.log(event)
   switch(post.message){

       case 'open login page':
           console.log(this); // 'DedicatedWorkerGlobalScope'
          this.props.navigateTo('login'); //'can not read property navigation of undefined'
           break;
   }
}

这是网络视图：

  <WebView
            // onNavigationStateChange={async (e) => {
            //     console.log(e);
            //      if (async() => await getKey('isLogged') === false)
            //          this.props.navigateTo('login') //its ok here
            // }}
            source={{uri: isAndroid ?'file:///android_asset/html/index.html'
                :'./html/index.html'}}
            ref={ webView => this.webView = webView }
            onMessage={this.onMessage}
        />

我使用this.props.navigatTo() 进行导航并且没问题，但在这种情况下，状态不会改变以在此处运行，这是我的堆栈导航器：

  login: {
        screen: Login
    },
    app: {
        screen: App  // webview defined here
    },

【问题讨论】：

标签： javascript react-native navigation android-webview postmessage

【解决方案1】：

我自己解决问题 :)) 我应该使用绑定， OnMessage = { this.onMessage.bind (this) } 我刚刚忘记了...

【讨论】：