从浏览器表单提交按钮重定向到应用程序本机响应

Question

I have a TypeForm integrated with my app and this type form opens in a WebView. The process goes like when I Sign up, a type form opens in a WebView. On form submit I want it to be redirected to home screen.

Here is my code:

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

I am using react-navigation for screen navigation purpose.

Answer 1

This all you can do it in on navigation state change so when you submit from that will return an response and that response you can capture and on that condition you can navigate to another screen.

i my scenario i am using for payment with 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;

so after payment instamojo will redirect to payment success of fail page that time i am capturing url and checking if success redirection is there then i am navigating to my payment status screen/

Answer 2

If you are using StackNavigator from react-navigation redirection or switch screens are really easy. you just need to call like the following code after your success response.

StackNavigator will look like

const Stacker = StackNavigator(
        {
            Landing: {
                path: "Landing",
                screen: LandingDrawer
            }
        },
        {
            initialRouteName: this.state.isLoggedIn,
            headerMode: "none",
            navigationOptions: {
                headerVisible: false
            }
        }
    );

Redirection

const resetAction = NavigationActions.reset({
                        index: 0,
                        actions: [
                            NavigationActions.navigate({
                                routeName: "Landing"
                            })
                        ]
                    });

this.props.navigation.dispatch(resetAction);

this is what I used in my app, hope this will help you

Answer 3

Have you looked at using the React wrapper around Typeform Embed SDK ?

It seems to be the way to go for what you want to achieve.

You can listen to onSubmit event that will be triggered when the typeform is submitted and then do the redirection.

The code would look like this

import React from 'react';
import { ReactTypeformEmbed } from 'react-typeform-embed';

class App extends React.Component {
  render() {
    return <ReactTypeformEmbed url={'https://demo.typeform.com/to/njdbt5'} onSubmit='alert("form submitted");'/>
  }
}

Hope it helps