从webview重定向到ReactNative组件

Question

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

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);
    }
}

我发现了一个伟大的教程,这有助于我了解它是如何工作在这里.

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

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;