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

Question

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

来源={{ ? }} 以及如何使用 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) 
} 

Answer 1

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)}
      />

Answer 2

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

Answer 3

您可以使用JavaScript FETCH Api。它就像 Jquery 但更好（我认为）。使用它来获取视频非常容易。如果您使用的是功能组件，则可以在应用加载（已加载）时使用useEffect()来获取视频

这是一个例子

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

现在您获取了视频:)