React Native如何在React Native上从本地json文件中获取数据视频链接

Question

我准备了一个应用程序，我需要从数据文件中获取视频链接。我能为此做些什么。

source＝｛｛？｝｝和如何使用flalist将4个视频投影到屏幕上？谢谢

export const data = [
{
id: 1,
name: "Video1",
video: "http://example.com/video1.mp4" -> ***how do i do this***
},
{
id: 2,
name: "Video2",
video: "http://example.com/video2.mp4" -> ***how do i do this***
},
{
id: 3,
name: "Video3",
video: "http://example.com/video3.mp4" -> ***how do i do this***
},
];

return (
<View style={styles.container}>
<Video
ref={video}
style={{ alignSelf: "center", width: 320, height: 200 }}
source={{ ? }}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={(status) => setStatus(() => status)}
/>

示例图像：我想要一个像这里写的代码一样的视频代码：(

export const data = [
{ 
id: 1, 
name: "image1", 
image: "../assets/image/sun.png" 
},
];     

import data from './data';  
function App() { 
return ( 
<View>
<Image  source={data.image}/>
</View) 
} 

Answer 1

您可以使用JavaScript FETCH Api。它类似Jquery，但更好(我认为(。用这个获取视频非常容易。如果您使用的是功能组件，则可以在应用程序加载时使用useEffect((来获取视频

以下是的示例

fetch('http://example.com/yourvideo.mp4')
.then(response => response.json())
.then(data => doSomething());

现在您获取了视频：(

Answer 2

如果你把json文件放在android的资产和iOS资源中，你可以使用这个包来读取文件内容https://www.npmjs.com/package/react-native-file-asset

Answer 3

return (
<View style={styles.container}>
<Video
ref={video}
style={{ alignSelf: "center", width: 320, height: 200 }}
source={{ uri: data?.video }}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={(status) => setStatus(() => status)}
/>