Question

我正在尝试从我的本机项目中的一个文件夹中获取多个图像。我正在尝试动态加载需要渲染动画的图像，该图像在另一个react组件中具有react-native-image-sequence组件。我知道您只能通过仅在react-native中传递一个字符串来要求图像，如下所示：require（“ ../ somepath”），所以我试图通过在动态路径中传递路径来加载多个图像。我需要能够将图像序列组件传递给像这样的数组：

 [ require("./1.png"), 
   require("./2.png"), 
   require("./3.png")
 ]

用于渲染动画序列。

我尝试创建一个文件，该文件包含一个名为prepareDirImages的方法，该方法创建并返回一个字符串，该字符串包含一个充满对进入的路径以及文件扩展名的require语句的数组。我的计划是在要创建的组件中使用此方法，然后调用eval（prepareDirImages（“ ./ dirPath”，“ png”））将字符串转换为实际的数组表示形式，然后将其传递给图像序列组件

prepareReactImages.js：

   module.exports = {
    prepareDirImages(path, ext){
        fs.readDir(path).then(files => {
            const ex =
            "[\n" +
            files.map((x, index) =>{
                if(index < result.length - 1){
                    return `require("${path}/${x}"),`
                }
                `require("${path}/${x}")`
            }).join("\n") +
            "]";
            console.log(ex)
          fs.writeFile("../images/index.js", ex);
          return ex;
        })   
    }

}

myComponent.js：

  import React, { Component } from 'react';
  import ImageSequence from 'react-native-image-sequence';
  import { prepareDirImages } from '../services/prepareReactImages';
  import { View, Text } from 'react-native';
  const fs = require('react-native-fs');


  export default class myComponent extends Component {

 render(){
   console.log(eval(prepareDirImages("../images/imagesDir", "png")))
   let images = getImages();

return (
  <View>
      <ImageSequence
              images={images}
              style={this.props.style} 
              framesPerSecond={24}
            />
  </View>

);
  }

}

   async function getImages(){
    return eval(await prepareDirImages("../images/ed_anim_wave_v01", 
    "png"))
   }

我得到的是一个承诺，但我得到一个错误，说不能使用对象的属性过滤器来处理图像序列。我读到您必须使用fs.MainBundlePath或fs.DocumentDirectoryPath，但我不知道如何获取这些文件。如果有人可以帮助我，我将不胜感激！

如何在React Native应用程序中向一个组件要求多个文件

0 个答案: