Question

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

Answer 1

我已经解决了这个问题：

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;

我找到了一个很棒的教程，可以帮助我了解它的工作原理here。

这里有你的整个组件的样子：

{{1}}

Answer 2

通过使用以下链接对react-navigation的文档进行跟踪，可以实现从webview导航到另一个组件的相同操作 https://reactnavigation.org/docs/en/stack-actions.html

在onNavigationStateChange调用第1个内的webview

第一种方法

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);

第二种方式 如果您有个人资料堆栈，那么也可以通过以下链接nested react navigation

进行检查

import { NavigationActions } from 'react-navigation';

const navigateAction = NavigationActions.navigate({
  routeName: 'Profile',

  params: {},

  action: NavigationActions.navigate({ routeName: 'SubProfileRoute' }),
});

this.props.navigation.dispatch(navigateAction);

从webview重定向到ReactNative组件

2 个答案: