Блог

Главная - Вопросы по программированию - как воспроизвести анимацию Лотти с помощью uri в react native?

как воспроизвести анимацию Лотти с помощью uri в react native?

#react-native #animation #react-native-android #lottie

#react-native #Анимация #react-native-android #лотти

Вопрос:

как я могу воспроизвести анимацию Лотти с сервера (uri) в react native? я мог бы воспроизводить анимации из своих ресурсов проекта, но когда я использую source={{uri:»https://…data здесь …»}} я столкнулся с ошибкой … даже я загрузил файлы json на телефон и попытался воспроизвести их из хранилища телефона, но тоже столкнулся с ошибкой! вот код:

 <LottieView style={{ width: "28%", marginTop: "5%", alignContent: "center", alignItems: "center", 
 alignSelf: "center" }}
 source={{uri:"file://///data/user/0/com.duststudio/files/vv/test2.json"}} 
 autoPlay
 loop />

мне это действительно нужно … я был бы так счастлив и благодарен, если кто-нибудь знает, как это сделать 🙂

Комментарии:

1. В Lottie animation, насколько я помню, они добавляют анимированные фотографии connect в формате json, что означает, что вставка https в json вместо вызова https в исходном коде должна работать

2. Не могли бы вы, пожалуйста, написать мне очень простой пример?

3. @MahdiEslami смогли ли вы разобраться в этом? Кажется, я тоже не могу загрузить анимацию с помощью URI. Источник, который я использую, это source={{ uri: "https://assets1.lottiefiles.com/private_files/lf30_GjhcdO.json" }}

4. Нет, я не был …. я пытался также загрузить анимацию Лотти и загрузить ее из хранилища телефона, но она работала только тогда, когда была исправлена, и не показывала ее сразу после загрузки … я перешел на Flutter, и это потрясающе… Библиотека Flutter Lottie предоставляет доступ к файлам Lottie json также с помощью uri, но частота кадров в секунду составляет менее 30

Ответ №1:

я нашел это … я просто нашел способ: ‘) вам просто нужно получить JSON анимации Лотти, а затем установить для нее состояние, проверьте это:

  import React, { useState, useEffect } from 'react';
    import { Text, View, TouchableOpacity } from 'react-native';
    import LottieView from 'lottie-react-native';


   export default function App(){
     const [LottieAnim, setLottieAnim] = useState()
    
     useEffect(() => {
            fetch('https://test.ir/test.json', {
                method: "GET",
            })
                .then((response) => response.json())
                .then((responseData) => {
                    console.log(responseData);
                    setLottieAnim(responseData)
                })
                .catch((error) => {
                    console.log(error);
                })
        }, [])

return(

        <View style={{ flex: 1 }}>
              {LottieAnim ? <LottieView source={LottieAnim} style={{ width: "50%" }} autoPlay loop /> : (null)}
         </View>

)}