我有一页,有一张表格,一个带子将进入另一个航道,使用 st,但当我使用背纽州时,所有投入都仍然被填满,我想重新打下所有价值,我点击 but子,从 st航返回。
我的路由:
import { NavigationContainer } from @react-navigation/native
import { createStackNavigator } from @react-navigation/stack
import {Home} from @/screens/home
import {Result} from @/screens/result
const Stack = createStackNavigator();
declare global {
namespace ReactNavigation {
interface RootParamList{
Home: undefined;
Result: undefined;
}
}
}
export default function Routes() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={Home} options={{headerShadowVisible: false, headerShown: false,}} />
<Stack.Screen name="Result" component={Result} options={{
title: ,
headerShadowVisible: false,
headerTransparent: true,
headerStyle: {
backgroundColor: #e7305b ,
}}} />
</Stack.Navigator>
</NavigationContainer>
)
}
家庭构成部分:
import { Image, View, ScrollView, Text } from "react-native"
import { Button } from "@/components/Button"
import { useNavigation } from "@react-navigation/native"
import {ControlledTextInput} from @/controller/controlled_input
import { useForm } from react-hook-form
import { yupResolver } from @hookform/resolvers/yup
// import moment from moment
import * as yup from yup
const phoneNumberRules = /^(?:(?:+|0{0,2})91(s*[-]s*)?|[0]?)?[789]d{9}$/;
const schema = yup.object({
name: yup.string().required("Informe o nome do cliente!"),
phone: yup.string()
.required("Informe o telefone do cliente!"),
address: yup.string().required("Informe o endereço do cliente"),
buy_date: yup.string().required("Informe a data de compra!"),
weight: yup.number().min(1).required("Informe o peso do casco!"),
tara: yup.number().min(1).required("Informe a tara!"),
})
export function Home() {
const { navigate } = useNavigation();
const {
control,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
});
const onSubmit = (data: any) => {
console.log(data)
navigate( Result )
};
return (
<View className="flex flex-1 flex-col space-between bg-slate-700">
<View className="flex justify-center py-4">
<View className="flex items-center">
<Image className="mt-10" source={require("@/assets/banner.png")}/>
</View>
</View>
<View className="flex justify-center">
<ScrollView className="flex flex-col space-between">
<View className="flex flex-col space-between px-10 py-2">
<ControlledTextInput
control={control}
name="name"
placeholder="Nome"
className={`... ${errors.name ? border-2 border-red-800 border-r rounded-lg : }`}
/>
{errors.name && <Text style={{
alignSelf: flex-start ,
color: #ff375b ,
marginTop: 5,
}}
>{errors.name.message}</Text>}
</View>
<View className="flex flex-col space-between px-10 py-2">
<ControlledTextInput
control={control}
name="phone"
placeholder="Telefone"
className={`... ${errors.phone ? border-2 border-red-800 border-r rounded-lg : }`}
/>
{errors.phone && <Text style={{
alignSelf: flex-start ,
color: #ff375b ,
marginTop: 5,
}}
>{errors.phone?.message}</Text>}
</View>
<View className="flex flex-col space-between px-10 py-2">
<ControlledTextInput
control={control}
name="address"
placeholder="Endereço"
className={`... ${errors.address ? border-2 border-red-800 border-r rounded-lg : }`}
/>
{errors.address && <Text style={{
alignSelf: flex-start ,
color: #ff375b ,
marginTop: 5,
}}
>{errors.address?.message}</Text>}
</View>
<View className="flex flex-col space-between px-10 py-2">
<ControlledTextInput
control={control}
name="buy_date"
placeholder="Data de Compra"
className={`... ${errors.buy_date ? border-2 border-red-800 border-r rounded-lg : }`}
/>
{errors.buy_date && <Text style={{
alignSelf: flex-start ,
color: #ff375b ,
marginTop: 5,
}}
>{errors.buy_date?.message}</Text>}
</View>
<View className="flex flex-col space-between px-10 py-2">
<ControlledTextInput
control={control}
name="weight"
placeholder="Peso"
className={`... ${errors.weight ? border-2 border-red-800 border-r rounded-lg : }`}
/>
{errors.weight && <Text style={{
alignSelf: flex-start ,
color: #ff375b ,
marginTop: 5,
}}
>{errors.weight?.message}</Text>}
</View>
<View className="flex flex-col space-between px-10 py-2">
<ControlledTextInput
control={control}
name="tara"
placeholder="Tara"
className={`... ${errors.tara ? border-2 border-red-800 border-r rounded-lg : }`}
/>
{errors.tara && <Text style={{
alignSelf: flex-start ,
color: #ff375b ,
marginTop: 5,
}}
>{errors.tara?.message}</Text>}
</View>
</ScrollView>
</View>
<View className="flex py-4 px-10 justify-center">
<Button
label="Enviar formulário"
labelClasses="text-indigo-950"
onPress={handleSubmit(onSubmit)}
/>
</View>
</View>
)
}
结果部分:
import { Image, View, Text } from "react-native"
export function Result() {
return (
<View className="flex flex-1 flex-col space-between bg-slate-700">
<View className="flex justify-center">
<View className="flex items-center">
<Image className="mt-10" source={require("@/assets/banner.png")}/>
</View>
</View>
<View className="flex flex-1 pt-4">
<Text>Result</Text>
</View>
</View>
)
}
当点击 but子到干线上时,当一点点击从拆船到以前的航道时,这些投入继续用旧价值填充。