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

Question

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

这是我的代码：

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

我正在使用反应导航进行屏幕导航。

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 并检查是否存在成功重定向，然后我正在导航到我的付款状态屏幕/

Answer 2

如果您使用的是StackNavigatorreact-navigation重定向或切换屏幕真的很容易。 您只需要在成功响应后调用以下代码即可。

StackNavigator 看起来像

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

重定向

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

这是我在我的应用程序中使用的，希望这对您有所帮助

Answer 3

您是否考虑过在 Typeform Embed SDK 中使用 React 包装器？

这似乎是实现您想要实现的目标的方法。

您可以侦听提交排版表单时将触发onSubmit事件，然后执行重定向。

代码如下所示

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");'/>
}
}

希望对你有帮助