老师,求助

来源:1-2 课程导学

慕尼黑0536602

2021-05-20

hey 老师,
我遇到一个问题,
我需要做一个功能,就是在用户注册完之后,自动跳转到编辑资料的界面。
这个编辑资料的界面只需要在用户第一次注册的时候出现,以后用户有账号就不需要了。

我遇到的问题: 我无法完成在完成注册后,上传用户的邮箱跟密码之后,再进行跳转到编辑界面。。。 我不太清楚是哪里出了问题。。
这个是我的提交按钮,我做了一个可以直接提交资料的功能:
(SubmitButton.js)

import React from 'react';
import { useFormikContext } from 'formik';
import AppButton from './AppButton';


function SubmitButton({title,to_press}) {
    
    const { handleSubmit } = useFormikContext();


    return (
        <AppButton title={title} onPress={handleSubmit,to_press}/>
    );
}

export default SubmitButton;

接下来,我做了一个上传表单的component:
AppFormField.js

import React from 'react';
import { useFormikContext } from 'formik';
import AppTextInput from './AppTextInput';
import ErrorMsg from './ErrorMsg';

import { StyleSheet } from 'react-native'
function AppFormFlied({name,width,...otherProps}) {
    const { setFieldTouched, handleChange, errors, touched } = useFormikContext();
    return (
        <>  
            <ErrorMsg error={errors[name]} visible={touched[name]}/>
            <AppTextInput
                 onBlur ={()=>setFieldTouched(name)}
                onChangeText={handleChange(name)}
               width = {width}
                {...otherProps}
                        />
            
            
        </>
    );
}
const styles = StyleSheet.create({
    
})
export default AppFormFlied;

还有一个AppForm.js:

import React from 'react';
import { Formik } from 'formik';

function AppForm({initialValues,onSubmit,validationSchema,children}) {
    return (
        <Formik
            initialValues = {initialValues}
            onSubmit = {onSubmit}
            validationSchema={validationSchema}
        >
            {() => (
            <>
            {children}
             </>
            )}
        </Formik>
    );
}

export default AppForm;

接下来,我应用在RegisterScreen.js中:

import React from 'react';
import { Image, StyleSheet,ScrollView } from 'react-native';
import Screen from '../components/Screen';
import colors from '../config/colors';
import * as Yup from 'yup';
import AppFormFlied from '../components/AppFormFlied';
import SubmitButton from '../components/SubmitButton';
import AppForm from '../components/AppForm';
import i18n from './../translations/i18n';
import routes from '../navigator/routes';

function RegisterScreen({navigation}) {
    const validationSchema = Yup.object().shape({
        email: Yup.string().required().email().label("Email"),
        password : Yup.string().required().min(4).max(16).label("Password")
    })
    return (
      
        <Screen style ={styles.container}>
              <ScrollView contentContainerStyle={styles.out_container}>
            <>
             <Image style={styles.logo} source={require("../assets/gears_run_logo.png")}/>
            
          
            <AppForm
                initialValues={{ email: '', password: '' }}
                onSubmit={values => console.log(values)}
                validationSchema ={validationSchema}
            >
               
                <AppFormFlied
                autoCapitalize="none"
                autoCorrect={false}
                icon="email"
                keyboardType="email-address"
                name ="email"
                placeholder={i18n.t('welcome_screen.email')}
                textContentType ="emailAddress"
                        />
            
            <AppFormFlied
                 autoCapitalize="none"
                 autoCorrect={false}
                 icon="lock"
                 name ="password"
                 placeholder={i18n.t('welcome_screen.password')}
                secureTextEntry
                textContentType="password"
                />
              
             
           
                <SubmitButton title={i18n.t('welcome_screen.register')} to_press={()=>navigation.navigate(routes.USER_INFO)}/>
                       

            </AppForm>
            </>
            </ScrollView>
        </Screen>
        
    );
}
const styles = StyleSheet.create({
    container: {
    padding :15,
    backgroundColor : colors.white,   
     
    },
    out_container :{
   flexGrow :1,
   alignItems : 'center',
    },
    logo: {
        width: 128,
        height: 145,
        alignSelf: 'center',
        marginTop :10,    
        marginBottom : 30,
    },
    quote: {
        alignSelf: 'center',
        textAlign: 'center',
        marginTop: 30,
        marginBottom: 40,
        fontSize : 19,
        color: colors.light_dark,
        fontStyle :'italic',
        
        
        
    },

   
    
})
export default RegisterScreen;

图片描述

按原计划,此时,后台应该会收到用户的邮箱和密码的信息,但是,我发现,只要之前的SubmitButton.js在onPress中,加上另外一个to_Press,虽然界面可以顺利跳转到编辑的界面,但是,后台收不到用户的邮箱和密码的信息。。。
这是编辑界面:
图片描述

import React from 'react';
import { Image, ScrollView, StyleSheet, View } from 'react-native'
import AppButton from '../components/AppButton';
import AppInputTextWithCount from '../components/AppInputTextWithCount';
import AppText from '../components/AppText/AppText';
import ImgPicker from '../components/ImgPicker';
import colors from '../config/colors';
import i18n from './../translations/i18n';

function UserIntro(props) {
    return (
        <ScrollView contentContainerStyle={styles.out_container}>
        <View style={styles.container}>
            <View style={styles.title}>
       <Image source={require('../assets/gears_run_txt.png')} style={styles.txt_title_img}/>
            </View>
            {/**User img */}
            <View style={styles.user_img_container}>
            <AppText style={styles.title_txt}>{i18n.t('edit_user_profile.avatar')}</AppText>
            <ImgPicker />

            </View>

            {/**User intro */}
            <View style={styles.second_container}>
            <AppText style={styles.title_two}>{i18n.t('edit_user_profile.about')}</AppText>
            <AppInputTextWithCount name="feather" number={50}/>
             
            <AppButton title={i18n.t('edit_user_profile.save')} style={styles.btn} onPress={()=>{console.log('保存')}}/>
            </View>
            
        </View>
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    out_container :{
        flexGrow : 1,
    },
    containr : {
        flex : 1,
        
    },
    title :{
        width : '100%',
        minHeight : 160,
        backgroundColor : colors.primary,
        alignItems  :'center',
        borderBottomLeftRadius : 15,
        borderBottomEndRadius : 15,
       
    },
    txt_title_img :{
        width : 180,
        height : 80,
        position :'absolute',
        bottom : 30,
    },
    user_img_container : {
        width : '100%',
        minHeight : 150,
        alignItems :'center',
        padding : 10,
        marginTop : 10,
        marginBottom : 10,

    },
    title_txt : {
        fontSize : 22,
        fontWeight : 'bold',
        marginBottom : 30,

    },
    second_container : {
        width : '100%',
        minHeight : 100,
        alignItems : 'center',
        padding : 20,
        marginBottom : 20,

    },
    title_two : {
        fontWeight : 'bold',
        fontSize : 22,

    },
    btn :{
        marginTop : 20,
    },
})
export default UserIntro;

不好意思,劳烦您帮我看一下哈,我经验不足,应该有知识点是我不知道的。谢谢您哈!!感激不尽!!

写回答

1回答

CrazyCodeBoy

2021-05-20

从上述的代码可以看到,你在点击表单提交按钮之后,直接跳到另外一个页面,所以导致表达没有提交成功,建议你再先提交表单后加一个回调函数,然后的话在回调函数中跳转到对应的页面。
1
1
慕尼黑0536602
谢谢老师哈。那我再根据您说的试试看。
2021-05-21
共1条回复

RN入门到进阶,打造高质量上线App

解锁React Native开发应用新姿势,React Native新版本热门技术

3144 学习 · 3241 问题

查看课程