javascript - 如何在 React Native 的函数中加载 Lottie 动画？

Question

我的想法类似于“instagram like”，当你点击它时，它应该呈现一个心脏动画

我的代码：当您点击心形按钮时，它会调用“changeFavorite”函数，该函数将在 API 中设置 'favorite = true' 并呈现动画。它更新 API，但不返回带有 Lottie Animation 的 JSX

//点赞按钮

<TouchableOpacity onPress={changeFavorite} style={{borderRadius: 50, marginRight: 16, marginTop: 16}}>
       <MaterialIcons name="favorite" size={30}  color={favorito == 1 ? 'red' : '#fff'}/></TouchableOpacity>

//更改收藏夹

async function changeFavorite() {
        try {
            await api.put(`favoritos/${local.id}`, {
                local_id: local.id
            }).then(res => {
                setFavorito(res.data)
                if(favorito === 0) {
                    console.log("like")
                    return (
                        <View style={{flex: 1, height: 300, width: 300, position:"absolute"}}>
                            <LottieView
                            source={require('../../assets/heart.json')}    
                            resizeMode="cover"
                            autoPlay
                            />
                        </View>
                    )
               }
                else {
                    console.log("deslike")
                }
            })
        } catch (error) {
            console.log(error)
        }        
}

标签： javascriptreact-nativeanimationjsxlottie

Answer 1

设置对您的 Lottie 的引用。

export default class App extends Component {

  changeFavorite = () => {
    this.Lottie.play();       //play it inside your function call
  };

  render() {
    return (
      <LottieView
        autoPlay={false}
        loop={false}
        ref={(e) => {
          this.Lottie = e;     //set a reference variable
        }}
        ...
      />
    );
  }
}