Как загрузить Lott ie Animation внутри функции в React Native? - PullRequest
Новая
       101

Как загрузить Lott ie Animation внутри функции в React Native?

0 голосов
/ 08 мая 2020

Моя идея чем-то похожа на «Instagram like», когда вы нажимаете на нее, она должна отображать анимацию сердца

Мой код: когда вы нажимаете кнопку сердца, он вызывает функцию «changeFavorite» , который установит избранное = true в API, а также отобразит анимацию. Он обновляет API, но не возвращает JSX с Lott ie Animation

// Like Button 

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

// changeFavorite 

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

1 Ответ

0 голосов
/ 24 мая 2020

Установить ссылку на ваш Lott ie. 

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
        }}
        ...
      />
    );
  }
}
...