从 webview 重定向到 ReactNative 组件

Posted 2023-03-14

【中文标题】从 webview 重定向到 ReactNative 组件

【英文标题】：Redirect to ReactNative component from webview

【发布时间】：2016-12-27 12:19:11

【问题描述】：

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

【参考方案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;

【参考方案2】：

通过使用以下链接遵循 react-navigation 的文档，我可以从 webview 导航到另一个组件。 https://reactnavigation.org/docs/en/stack-actions.html

对于 onNavigationStateChange 内的 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);