从webview重定向到ReactNative组件

Question

我正在使用原生WebView来打开一些复杂的表单步骤。在完成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); 
    } 
} 

，我发现了一个伟大的教程，这有助于我了解它是如何工作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;