1

我用来react-native-fs从远程服务器下载 Lottie 文件 (json)。将其保存到文件系统后，我得到一个类似/Users/marlon/Library/Developer/CoreSimulator/Devices/8E0A092D0E86/data/Containers/Data/Application/AADD60D8DFAD/Documents/animation.json.

现在有什么方法可以将该文件路径用作源LottieView？我尝试了各种方法，但都没有成功：

var path = '/Users/marlon/Library/Developer/CoreSimulator/Devices/8E0A092D0E86/data/Containers/Data/Application/AADD60D8DFAD/Documents/animation.json'

<LottieView source={{ uri: path }} />
<LottieView source={{ uri: 'file:/' + path }} />
<LottieView source={{ uri: 'file://' + path }} />
<LottieView source={{ uri: 'file://' + path, isStatic: true }} />

回答

只需将动画文件作为 javascript 对象传递给LottieView. 所以我现在所做的就是用 . 打开文件react-native-fs并用JSON.parse. 最终结果如下所示：

RNFS.readFile(animations.congratsAnimation).then(res => {
    this.setState({ animation: JSON.parse(res) });
}
...
<LottieView source={this.state.animation} />
4

2 回答 2

0

您不应硬编码下载的 json 文件路径，而应将其保存在设备的存储中，例如图片文件夹：

npm install --save react-native-fetch-blob

const { config, fs } = RNFetchBlob
RNFetchBlob.config({ path : RNFetchBlob.fs.dirs.DocumentDir + '/animation.png' +  })
.fetch('GET', 'http://example.com/file/whichever', {
    'Cache-Control' : 'no-store'
})
.then((res) => {
    // where the file is, keep it as state.animationPath
    this.setState(animationPath: res.path()) 
})

//render()
<LottieView source={{require(this.state.animationPath)}, isStatic: true }} />
于 2018-03-23T09:11:57.480 回答
0

我认为您应该在引用资源路径时使用require()函数。例如，您可以执行以下操作：

var path = require('/Users/marlon/Library/Developer/CoreSimulator/Devices/8E0A092D0E86/data/Containers/Data/Application/AADD60D8DFAD/Documents/animation.json');

或者

<LottieView source = {require('/Users/marlon/Library/Developer/CoreSimulator/Devices/8E0A092D0E86/data/Containers/Data/Application/AADD60D8DFAD/Documents/animation.json')} />
于 2018-03-23T09:00:58.380 回答