如何在 React Native 中使用 uri 播放 Lottie 动画?
how to play Lottie animations with uri in react native?
我如何在 React Native 中从服务器 (uri) 播放 Lottie 动画?
我可以从我的项目资产中播放动画但是当我使用 source={{uri:"https://...data here..."}} 我遇到错误...即使我下载了 json 文件到 phone 并尝试从 phone 存储播放,但也遇到错误!
这里的代码:
<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 />
我真的需要它...如果有人知道该怎么做,我将非常高兴和感激:)
我找到了...我刚刚找到了方法:')
你只需要获取 Lottie Animation 的 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>
)}
我如何在 React Native 中从服务器 (uri) 播放 Lottie 动画? 我可以从我的项目资产中播放动画但是当我使用 source={{uri:"https://...data here..."}} 我遇到错误...即使我下载了 json 文件到 phone 并尝试从 phone 存储播放,但也遇到错误! 这里的代码:
<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 />
我真的需要它...如果有人知道该怎么做,我将非常高兴和感激:)
我找到了...我刚刚找到了方法:') 你只需要获取 Lottie Animation 的 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>
)}