reactjs – 从webview重定向到ReactNative组件

发布时间：2020-12-15 20:15:04 所属栏目：百科来源：网络整理

导读：我正在使用反应原生WebView打开一些复杂的表单步骤.我希望app用户在完成WebView中的最后一步( http://example.com/completed/)后重定向Android应用主页(反应本机组件). 解决方法我已经解决了这个问题： _onLoad(state) { //I check the url to see if every

我正在使用反应原生WebView打开一些复杂的表单步骤.我希望app用户在完成WebView中的最后一步( http://example.com/completed/)后重定向Android应用主页(反应本机组件).

解决方法

我已经解决了这个问题：

_onLoad(state) {
    //I check the url to see if everything goes right
    if (state.url.indexOf(BASEURL + '/auth/success') != -1) {
      let token = state.url.split("token=")[1];
      token = token.substring(0,token.length - 4);
      //Here I'm caming back
      NavigationsActions.back();
      //In your case you might do something like this:
      NavigationsActions.replaceRoute({
          id: 'your route id'
      });
      SessionActions.setSession(token);
    }
}

我找到了一个很棒的教程,这有助于我理解它是如何工作的here.

在这里你有我的整个组件的样子：

import React,{ Component } from 'react';
import {
  StyleSheet,WebView,Text
} from 'react-native';
import NavigationsActions from '../../actions/NavigationsActions';
import NavigationConstants from '../../constants/NavigationConstants';
import RouteConstants from '../../constants/RouteConstants';
import SessionActions from '../../actions/SessionActions';

var BASEURL = 'http://localhost:8080';

class FacebookLogIn extends Component {
  render() {
    return (
      <WebView onNavigationStateChange={this._onLoad} style={styles.container} source={{ uri: BASEURL + '/auth/facebook' }}/>
    );
  }

  _onLoad(state) {
    console.log(state.url);
    if (state.url.indexOf(BASEURL + '/auth/success') != -1) {
      let token = state.url.split("token=")[1];
      token = token.substring(0,token.length - 4);
      NavigationsActions.back();
      SessionActions.setSession(token);
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

module.exports = FacebookLogIn;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!