老师,求助
来源: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回答
-
从上述的代码可以看到,你在点击表单提交按钮之后,直接跳到另外一个页面,所以导致表达没有提交成功,建议你再先提交表单后加一个回调函数,然后的话在回调函数中跳转到对应的页面。112021-05-21
相似问题