Блог

Я разрабатываю приложение React Native в Expo, и у меня есть пользовательская анимация заставки, которую я запускаю изначально после AppLoading исчезновения заставки. Это работает в симуляторе — переход animate out Animated.timing — это переход от 1 к 0.

Проблема в том, что на реальном iPhone загрузка приложения прекращается на долю секунды, а за ней нет дополнительной анимированной заставки (an Animated.Image ). Однако другие элементы приложения загрузились за эту долю секунды.

Это происходит, даже если я удаляю анимацию «анимировать». Таким образом, моя логика состоит в том, чтобы отложить исчезновение загрузки приложения на 1 секунду достаточно долго, чтобы вторичный всплеск был устойчивым.

Как я могу это сделать? Что здесь происходит?

РЕДАКТИРОВАТЬ: здесь есть только упоминание о загрузке приложений:

   if (!fontsLoaded) {
    return <AppLoading />;
  } else {
 

Анимированные элементы заставки

 <Animated.Image pointerEvents={"none"} style={[styles.splash, { opacity: splashOpacity }]} source={require('./assets/splashnew.png')} />
    <Animated.Image pointerEvents={"none"} style={[styles.splashTxt, { opacity: splashOpacity, transform: [{scaleY: splashScale }, {scaleX: splashScale }]} ]} source={require('./assets/splash.png')} />
 

Управляются этой функцией:

   useEffect(() => {

    Animated.sequence([
        Animated.delay(1000),
      Animated.spring(splashScale, {
        toValue: 1,
        bounciness: 4,
        useNativeDriver: false,
        speed: 2
      })
    ]).start()

    const interval = setInterval(() => {

      Animated.sequence([

          Animated.parallel([
            Animated.spring(splashScale, {
              toValue: 0,
              bounciness: 4,
              useNativeDriver: false,
              speed: 2
            }),
            Animated.spring(splashOpacity, {
              toValue: 0,
              bounciness: 2,
              useNativeDriver: false,
              speed: 3
            }),
 

все, что вам нужно сделать, это настроить другую переменную состояния и использовать ее вместо fontsLoaded .

    const [waitOneSecond, setWaitOneSecond] = useState(false);

   useEffect(()=>{
     if (fontsLoaded) setTimeOut(()=>{setWaitOneSecond(true);},1000);
   },[fontsLoaded]);


  if (!waitOneSecond) {
    return <AppLoading />;
  } else {