как требовать несколько файлов для компонента в собственном приложении реагировать - PullRequest
Новая
       27

как требовать несколько файлов для компонента в собственном приложении реагировать

0 голосов
/ 12 января 2019

Я пытаюсь запросить несколько изображений из папки в моем собственном проекте. Я пытаюсь динамически загружать изображения, которые мне нужны для рендеринга анимации, с помощью компонентаact-native-image-sequence в другом компоненте реакции. Я знаю, что вы можете требовать изображения, только передавая строку в реагирующем роде, как это: 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, но я не понимаю, как получить эти файлы. Если кто-нибудь может мне помочь, я был бы очень признателен !!

...