javascript - 从浏览器表单提交按钮重定向到 App React Native

Question

我有一个与我的应用程序集成的 TypeForm，此类型表单在 WebView 中打开。这个过程就像我注册时一样，一个类型的表单在 WebView 中打开。在提交表单时，我希望将其重定向到主屏幕。

这是我的代码:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ScrollView,
  WebView,
  Linking
} from 'react-native';
import Constants from '../constants';
import NavigationBar from 'react-native-navbar';
import Icon from 'react-native-vector-icons/FontAwesome';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as userActions from '../redux/modules/user';

type Props = {};
class Typeform extends Component<Props> {
  constructor(props){
    super(props);
    this.state={

    }
    // console.log('props ******* next_lottery_time constructor ******** ',props)
  }

  render() {
    const { navigate, goBack } = this.props.navigation;
    const titleConfig = {
      title: 'SURVEY',
      tintColor:Constants.Colors.White
    };
    const uri = 'https://threadest1.typeform.com/to/vjS2Nx';
    return (
      <View style={{flex:1}}>
        <NavigationBar
          title={titleConfig}
          style={{backgroundColor: 'rgb(32,73,157)'}}
          statusBar={{hidden:false,tintColor:'rgb(32,73,157)'}}
          leftButton={<TouchableOpacity style={{marginLeft:Constants.BaseStyle.DEVICE_WIDTH/100*2.5,marginTop:Constants.BaseStyle.DEVICE_HEIGHT/100*.8}} onPress={()=>goBack()}><Icon color={Constants.Colors.White} name='chevron-circle-left' size={30} /></TouchableOpacity>} />
        <WebView
        ref={(ref) => { this.webview = ref; }}
        source={{ uri }}
        onNavigationStateChange={(event) => {
          if (event.url !== uri) {
            this.webview.stopLoading();
            Linking.openURL(event.url);
          }
        }}
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    //justifyContent: 'center',
    alignItems: 'center',
  }
});

const mapDispatchToProps = dispatch => ({
  userActions: bindActionCreators(userActions, dispatch)
});

export default connect(null, mapDispatchToProps)(Typeform);

我正在使用 react-navigation 进行屏幕导航。

Answer 1

这就是您在导航状态更改时可以执行的所有操作，因此当您从那里提交时将返回一个响应，您可以捕获该响应，在这种情况下您可以导航到另一个屏幕。

我的场景是使用 instamojo 进行支付。

import React, { Component } from "react";
import { Text, View, StyleSheet, WebView } from "react-native";
import { BASE_URL } from "../../../constants/apiList";
import SecondaryHeader from "../../common/SecondaryHeader";

class Payment extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: true,
      refreshing: false,
      isPiad: false,
      packages: []
    };
  }
  getParameterByName(name, url) {
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
    if (!results) {
      return null;
    }
    if (!results[2]) {
      return "";
    }
    return decodeURIComponent(results[2].replace(/\+/g, " "));
  }
  onNavigationStateChange = eve => {
    if (eve.loading !== this.state.isLoading) {
      this.setState({
        isLoading: eve.loading
      });
    }
    if (eve.url.indexOf("api/orders/") > -1) {
      this.props.navigation.replace("paymentStatus", {
        url: eve.url,
        id: this.props.navigation.state.params.id
      });
    }
  };
  render() {
    return (
      <View style={styles.container}>
        <SecondaryHeader title="PAYMENT" {...this.props} />
        <WebView
          source={{ uri: this.props.navigation.state.params.url }}
          onNavigationStateChange={this.onNavigationStateChange}
          style={{ height: 200 }}
          startInLoadingState={true}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

export default Payment;

所以在付款后，instamojo 将重定向到失败页面的付款成功，那时我正在捕获 url 并检查是否存在成功重定向，然后我导航到我的付款状态屏幕/