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

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

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

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