我试图在lotti进程完成并消失后显示图像，但我无法在本地做出React

0lvr5msh 于 2022-12-14 发布在 React

关注(0)|答案(1)|浏览(120)

下面是我的代码：

const Success =({navigation})=>{
     
    

  useEffect(() => {

    setTimeout(()=>{

      <View>
        <Image  source={images.done}
          style={{
             width:100,
            height:100
      }}
      />
    </View>
    navigation.navigate('Home')

    },4000)
  }, [])

    
    return(
        <View style={{
            flex:1,
            justifyContent:'center',
            alignItems:'center',
        }}>
    <LottieView
        style={{
          width: 100,
          height: 60,
        }}
        source={images.progress}
     autoPlay 
      />
        </View>
    )
}

export default Success ;

请帮助我如何首先显示Lotti进度，然后立即我想完成的图像出现在Lotti进度完成后消失。所以我会知道如何设置时间为Lotti进度，然后设置时间显示图像完成，然后导航到下一页

react-native

来源：https://stackoverflow.com/questions/74696016/im-trying-to-display-the-image-after-the-lotti-progress-finished-and-disappeare

1条答案

按热度按时间

qni6mghb1#

你可以使用lottie-react-native库中的onAnimationFinish prop 。告诉程序当lottie-react-native动画结束时你要做什么。

const Success = ({navigation}) => {

  const [lottieFinished, setLottieFinished] = useState(false);

  const onAnimationFinish = () => {
    setLottieFinished(true);
    setTimeout(() => {
      //Go Back to home page after 4 seconds
      navigation.navigate('Home')
    }, 4000);
  }

  return (
    <View>
      {
        !lottieFinished ?
          <LottieView
            source={images.progress}
            autoPlay
            loop={false}
            onAnimationFinish={onAnimationFinish}
          />
          :
          <Image
            source={images.done}
            style={{height:100, width:100}}
          />
      }
    </View>
  );
}

赞(0）回复(0）举报 2022-12-14

我来回答

我试图在lotti进程完成并消失后显示图像，但我无法在本地做出React

1条答案

相关问题

热门标签

最新问答