React Native 状态更新时屏幕跳动

rfbsl7qr  于 2023-03-13  发布在  React
关注(0)|答案(1)|浏览(198)

你好,我遇到了一个奇怪的问题,使用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;

是否有人已经遇到过此类问题?

gojuced7

gojuced71#

我也有同样的问题......屏幕在使用状态钩子进行状态更新时跳屏。我尝试了context API、redux和recoil,但状态更新仍然很慢,然后屏幕随机跳屏。我不太在意,但屏幕跳屏真的很烦人。
我需要帮助谢谢

相关问题