Question

我是全新的反应本机，我有一些屏幕，有一个表格，我使用redux形式来构建表单，但我提交表单时无法导航到另一个屏幕，我正在使用'反应-navigation'导航请任何帮助。

我的反应原生SignUpScreen.js

import React, {Component} from 'react';
import {View, Image, TouchableOpacity, StyleSheet, ScrollView, Text} from 'react-native';
import SignUpForm from './SignUpForm';

import Images from '../../Themes/Images';
import Styles from './Styles/SignUpStyle';
import Colors from '../../css/Colors';

export default class SignUpScreen extends Component {
    render() {
        return (
            <ScrollView style={[{backgroundColor:'#fff'}]} removeClippedSubviews={true} keyboardShouldPersistTaps={'always'}>
                <Image source={Images.signUpBackground} style={Styles.background}/>
                {/*<Provider store={store}>*/}
                    <SignUpForm />
                {/*</Provider>*/}
                <View style={[Styles.row, { justifyContent: 'space-between', marginTop:10, marginBottom:10, paddingLeft:24, paddingRight:24}]}>
                    <Text style={{alignSelf:'flex-end'}}>ALREADY HAVE AN ACCOUNT?</Text>
                    <TouchableOpacity style={{alignSelf:'flex-end'}} onPress={() => this.props.navigation.navigate('LoginScreen')}>
                        <Text style={{color:Colors.pink}}>SIGN IN</Text>
                    </TouchableOpacity>
                </View>
            </ScrollView>
        );
    }
}

和来自SignUpForm.js的我的redux

import React, {Component} from 'react';
import {Field, reduxForm} from 'redux-form';
import {StyleSheet, View, Text, TouchableOpacity, Dimensions} from 'react-native';
import {MKTextField, MKColor} from 'react-native-material-kit';
import Styles from './Styles/SignUpStyle';
import Colors from '../../css/Colors';
import OverlayButton from "../Helpers/OverlayButton";

const { width, height } = Dimensions.get('window');
const metrics = {
    screenWidth: width < height ? width : height,
    screenHeight: width < height ? height : width,
}

//Validation
const required = value => value ? undefined : 'Required';
const maxLength15 = value => value && value.length > 15 ? `Must be 15 characters or less` : undefined;
const isValidEmail = value => value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ? 'Invalid email address' : undefined;


const renderField = ({keyboardType, name, placeholder, password = false, style = {},  meta: {touched, error, warning}, input: {onChange, ...restInput}}) => {
    return (
        <View style={{height:70}}>
            <MKTextField
                ref={name}
                floatingLabelEnabled={true}
                highlightColor={MKColor.Cyan}
                floatingLabelFont={{fontFamily: "Avenir", fontSize: 12}}
                textInputStyle={[{textAlign:'center', fontFamily: "Avenir", fontSize: 12, paddingBottom: 0}]}
                placeholder={placeholder}
                style={style}
                keyboardType={keyboardType}
                password={password}
                autoCorrect={false}
                onChangeText={onChange}
                {...restInput}
            />
            {touched && ((error && <Text style={{ textAlign:'center', color: 'red' , fontSize: 10 }}>{error}</Text>) ||
            (warning && <Text style={{ textAlign:'center', color: 'orange' , fontSize: 10 }}>{warning}</Text>))}
        </View>);
};

const submit = values => {
    //**HOW CAN I NAVIGATE TO ANOTHER SCREEN HERE**
    //alert(`Validation success. Values = ~${JSON.stringify(values)}`);
}

const SingUpComponent = props => {
    const {handleSubmit} = props;

    return (
        // 575 is the height form the top of the image to the end of the logo
        <View style={{marginTop:(metrics.screenHeight <  575  ? metrics.screenHeight * 0.55 : metrics.screenHeight * 0.5), paddingLeft:24, paddingRight:24}}>
                <View style={{display:'none'}}>
                    <Field component={renderField} name="forEffect"/>
                </View>
                <Field keyboardType="default" style={[Styles.textfieldWithFloatingLabel]} component={renderField} name="fullname" placeholder="FULL NAME" validate={[required, maxLength15]}/>
                <Field keyboardType="email-address" style={[Styles.textfieldWithFloatingLabel]} component={renderField} name="email" placeholder="EMAIL" validate={[required, isValidEmail]}/>
                <Field keyboardType="default" style={[Styles.textfieldWithFloatingLabel]} component={renderField} name="password" placeholder="PASSWORD" validate={[required]} password={true}/>
            {/*<TouchableOpacity onPress={handleSubmit(submit)} style={{height: 56, marginTop:(metrics.screenHeight < 575  ? 21: metrics.screenHeight * 0.1), marginBottom:21, alignItems: 'center', backgroundColor: Colors.pink, borderRadius: 50 }}>*/}
                {/*<Text style={{color: 'white', fontSize: 16, width:'100%',  textAlign: 'center', padding: 15 }}>DONE</Text>*/}
            {/*</TouchableOpacity>*/}
            <OverlayButton
                clickButton={handleSubmit(submit)}
                buttonBackgroundColor={Colors.pink}
                pressBackgroundColor={'transparent'}
                bordered={true}
                borderWidth={2}
                borderColor={Colors.pink}
                pressTextColor={Colors.pink}
                extraStyle={{height: 56, marginTop:(metrics.screenHeight < 575  ? 21: metrics.screenHeight * 0.1), marginBottom:21, alignItems: 'center', backgroundColor: Colors.pink, borderRadius: 50 }}
                buttonTextColor={'#fff'}
                text="SIGN UP"></OverlayButton>
        </View>
    );
}

const SingUpForm = reduxForm({
    form: 'signUp', // a unique identifier for this form
})(SingUpComponent);

export default SingUpForm;

请提交有关如何在提交表单时导航到新屏幕的任何帮助

Answer 1

Redux-Form附带了您可以轻松指定的onSubmit和onSubmitSuccess函数。

＆＃13;

const SingUpForm = reduxForm({
    form: 'signUp',
    onSubmit: () => {
        yourNavigationMethod()
    }
})(SingUpComponent);

＆＃13;

您可以在文档中查找更多内容： https://redux-form.com/7.3.0/docs/api/reduxform.md/

提交redux表单时如何导航到新屏幕

1 个答案: