你好,我遇到了一个奇怪的问题,使用React原生,屏幕是“跳跃”每当我更新的状态,我猜。真的不知道它可以从哪里来,这里是一个快速视频的问题:
编辑:下面是发生这种行为的屏幕的源代码。
const SContainer = styled.View`
${({theme}) => css`
flex: 1;
align-items: center;
justify-content: space-between;
padding-left: ${theme.container.md}px;
padding-right: ${theme.container.md}px;
padding-top: 15px;
padding-bottom: 15px;
`}
`;
const SInputContainer = styled.View`
width: 100%;
margin-top: 30px;
`;
const SCGU = styled.TouchableOpacity`
flex-direction: row;
margin-bottom: 30px;
`;
const SignUp = ({navigation}) => {
const [checked, setChecked] = useState(false);
const lastnameRef = useRef();
const [lastname, setLastname] = useState(null);
const firstnameRef = useRef();
const [firstname, setFirstname] = useState(null);
const maileRef = useRef();
const [mail, setMail] = useState(null);
const phoneRef = useRef();
const [phone, setPhone] = useState(null);
const passwordRef = useRef();
const [password, setPassword] = useState(null);
const confirmPasswordRef = useRef();
const [confirmPassword, setConfirmPassword] = useState(null);
const disptach = useDispatch();
const handleSignup = () => {
disptach(AccountActions.register());
};
const handleCGU = () => {
alert('CGU');
};
const handleLastnameChange = text => {
setLastname(text);
};
const handleFirstnameChange = text => {
setFirstname(text);
};
const handleLogin = () => {
navigation.navigate(SCREEN_NAMES.AUTH.LOGIN);
};
useEffect(() => {
console.log('render');
}, []);
return (
<Screen
preset="scroll"
image={require('@app/assets/images/Backgrounds/fond-inscription.png')}>
<SContainer>
<Card
blur={10}
alignItems="center"
paddingVertical={30}
borderRadius={20}>
<Text variant="h1" style={{marginBottom: 20}}>
Inscription
</Text>
<View maxWidth={315}>
<Text variant="h3" style={{textAlign: 'center'}}>
Le suivi médical de votre animal à portée de main avec Zoovet
</Text>
<Text
style={{
marginTop: 10,
textAlign: 'center',
fontSize: 14,
color: theme.colors.boulder,
}}
variant="light">
Partager même ces informations (rdv, traitement...) avec votre
famille ou vos proches !
</Text>
</View>
<SInputContainer>
<Input
ref={lastnameRef}
placeholder="Nom*"
value={lastname}
onChangeText={handleLastnameChange}
/>
<Input
ref={firstnameRef}
value={firstname}
onChangeText={handleFirstnameChange}
placeholder="Prénom*"
/>
<Input placeholder="Email*" />
<Input placeholder="Téléphone" />
<Input placeholder="Mot de passe*" isPassword />
{/* <Input
placeholder="Mot de passe*"
secureTextEntry={true}
withButton={true}
icon={<EyeOpen />}
/> */}
<Input placeholder="Confirmation mot de passe*" isPassword />
</SInputContainer>
<SCGU onPress={() => setChecked(!checked)}>
<Checkbox style={{marginRight: 10}} checked={checked} />
<Text variant="light">
En cochant cette case, je reconnais avoir lu et compris les
<Link
style={{marginBottom: -2}}
size={10}
text="conditions générales d'utilisation (CGU)"
/>
{' et je les acceptes.* '}
</Text>
</SCGU>
<Button onPress={handleSignup} title="Inscription" maxWidth={254} />
</Card>
<View flexDirection="row" alignItems="baseline" marginTop={20}>
<Text style={{color: '#ffffff'}}>Déjà un compte ? </Text>
<Link
onPress={handleLogin}
variant="white"
text="Connectez-vous"
textStyle={{lineHeight: 21}}
/>
</View>
</SContainer>
</Screen>
);
};
export default SignUp;
是否有人已经遇到过此类问题?
1条答案
按热度按时间gojuced71#
我也有同样的问题......屏幕在使用状态钩子进行状态更新时跳屏。我尝试了context API、redux和recoil,但状态更新仍然很慢,然后屏幕随机跳屏。我不太在意,但屏幕跳屏真的很烦人。
我需要帮助谢谢