reactjs - 从 webview 重定向到 React Native 组件

Question

我正在使用 React Native WebView 打开一些复杂的表单步骤。我希望应用程序用户在 WebView 中完成最后一步( http://example.com/completed/ )后重定向 Android 应用程序主页( react native 组件)。

Answer 1

我已经解决了这个问题:

_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;