时间戳

首页 > 解决方案 > 如何在 React Native 中延迟 AppLoading？某些元素的加载速度比其他元素快？

ios - 如何在 React Native 中延迟 AppLoading？某些元素的加载速度比其他元素快？

问题描述

我在 Expo 中开发了一个 React Native 应用程序，并且我有一个自定义的启动屏幕动画，我最初在AppLoading启动屏幕消失后启动了该动画。这在模拟器中有效 - 动画过渡是Animated.timing从 1 到 0 的移动。

问题是，在实际的 iPhone 上，AppLoading 消失的瞬间，辅助动画启动屏幕 (an Animated.Image) 不在其后面。不过，该应用程序的其他元素已在那一瞬间加载。

即使我取出“动画输出”动画也会发生这种情况。所以我的逻辑是延迟 AppLoading 消失 1 秒的时间，足以让第二次飞溅稳定到位。

我怎样才能做到这一点？这里发生了什么？

编辑：这里只提到 AppLoading：

  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
            }),

标签： iosreactjsreact-nativesplash-screen

解决方案

您所要做的就是设置另一个状态变量并使用它而不是 fontsLoaded。

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

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


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

推荐阅读