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