我正在使用 React Native WebView 打开一些复杂的表单步骤。我希望应用程序用户在 WebView 中完成最后一步( http://example.com/completed/ )后重定向 Android 应用程序主页( react native 组件)。
最佳答案
我已经解决了这个问题:
_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;
关于reactjs - 从 webview 重定向到 React Native 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41345083/