问题描述
我准备了一个应用程序,我需要从数据文件中获取视频链接。我能为此做些什么。
源={{ ? }} 以及如何使用 flatlist 将 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)
}
解决方法
您可以使用 fetch 从文件中获取它
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
在反应中,您可以在 componentDidMount
或使用 UseEffect
中执行此操作。查看以下示例:
componentDidMount() {
fetch('json-link.json')
.then(response => response.json())
.then(data => console.log(data.video));
}
,
您可以使用 JavaScript FETCH Api。它就像 Jquery,但更好(我认为)。使用它可以很容易地获取视频。如果您使用的是功能组件,则可以在应用加载(加载)时使用 useEffect() 来获取视频
这是一个例子
fetch('http://example.com/yourvideo.mp4')
.then(response => response.json())
.then(data => doSomething());
现在你获取了视频:)
,如果你把你的json文件放在android的asset和iOS资源里面,就可以用这个包读取文件内容https://www.npmjs.com/package/react-native-file-asset
,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)}
/>