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付款的情况。

{{1}}

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

Answer 2

如果您使用来自StackNavigator重定向的react-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

您是否考虑过使用React wrapper around Typeform Embed SDK？

这似乎是你希望实现目标的方法。

您可以收听提交类型表时将触发的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");'/>
  }
}

希望有所帮助

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

3 个答案: