react native (expo) загрузка файлов уценки

благодаря ответу @Filipe я получил некоторые рекомендации и получил рабочий пример, который будет соответствовать вашим потребностям.

в моем случае, у меня было на assets/markdown/ папка, файл называется test-1.md

фокус в том, чтобы получить местный url для файла, а затем использовать fetch API, чтобы получить его содержимое как string.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Markdown from 'react-native-markdown-renderer';
const copy = `# h1 Heading 8-)

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |
`;

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      copy: copy
    }
  }

  componentDidMount() {
    this.fetchLocalFile();
  }

  fetchLocalFile = async () => {
    let file = Expo.Asset.fromModule(require("./assets/markdown/test-1.md"))
    await file.downloadAsync() // Optional, saves file into cache
    file = await fetch(file.uri)
    file = await file.text()

    this.setState({copy: file});
  }


  render() {
    return (
        <Markdown>{this.state.copy}</Markdown>
    );
  }
}

EDIT: чтобы избавиться от ошибки

невозможно разрешить ". /активы / уценка / тест-1.md "from" App.js"

вам нужно будет добавить packagerOpts часть фрагмента @Filipe в ваш .

app.в JSON

{
  "expo": {
    ...
    "assetBundlePatterns": [
      "**/*"
    ],
    "packagerOpts": {
      "assetExts": ["md"]
    },
    ...
  }
}

редактирование 2: Ответ на комментарий @Norfeldt: Хотя я использую react-native init при работе над собственными проектами, и поэтому я не очень хорошо знаком с Expo, я получил эту закуску Expo, которая может иметь некоторые ответы для вас:https://snack.expo.io/Hk8Ghxoqm.

это не будет работать на EXPO snack из-за проблем с чтением файлов, отличных от JSON, но вы можете проверить его локально, если хотите.

используя file.downloadAsync() предотвратит приложение, выполняющее вызовы XHR на сервер, где ваш файл размещен в этом сеансе приложения (до тех пор, пока пользователь не закроет и не откроет приложение).

если вы измените файл или измените файл (имитируется с помощью вызова Expo.FileSystem.writeAsStringAsync()), он должен отображать обновленное, пока ваш компонент повторно отображает и повторно загружает файл.

это произойдет каждый раз, когда ваше приложение будет закрыто и снова открыто, как file.localUri не сохраняется на сеансах, насколько я обеспокоен, поэтому ваше приложение всегда будет вызывать file.downloadAsync() по крайней мере один раз каждый раз, когда он открывается. Таким образом, у вас не должно быть проблем с отображением обновленного файла.

Я также взял некоторое время, чтобы проверить скорость использования fetch по сравнению с использованием Expo.FileSystem.readAsStringAsync(), и они были в среднем одинаковы. Часто Expo.FileSystem.readAsStringAsync была ~200 мс быстрее, но это не сделка прерыватель на мой взгляд.

Я создал три разных метода для извлечения одного и того же файла.

export default class MarkdownRenderer extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      copy: ""
    }
  }

  componentDidMount() {
    this.fetch()
  }

  fetch = () => {
    if (this.state.copy) {
      // Clear current state, then refetch data
      this.setState({copy: ""}, this.fetch)
      return;
    }
    let asset = Expo.Asset.fromModule(md)
    const id = Math.floor(Math.random()  * 100) % 40;
    console.log(`[${id}] Started fetching data`, asset.localUri)
    let start = new Date(), end;

    const save = (res) => {
      this.setState({copy: res})
      let end = new Date();
      console.info(`[${id}] Completed fetching data in ${(end - start) / 1000} seconds`)
    }

    // Using Expo.FileSystem.readAsStringAsync.
    // Makes it a single asynchronous call, but must always use localUri
    // Therefore, downloadAsync is required
    let method1 = () => {
      if (!asset.localUri) {
        asset.downloadAsync().then(()=>{
          Expo.FileSystem.readAsStringAsync(asset.localUri).then(save)
        })
      } else {
        Expo.FileSystem.readAsStringAsync(asset.localUri).then(save)
      }
    }

    // Use fetch ensuring the usage of a localUri
    let method2 = () => {
      if (!asset.localUri) {
        asset.downloadAsync().then(()=>{
          fetch(asset.localUri).then(res => res.text()).then(save)
        })
      } else {
        fetch(asset.localUri).then(res => res.text()).then(save)
      }
    }

    // Use fetch but using `asset.uri` (not the local file)
    let method3 = () => {
      fetch(asset.uri).then(res => res.text()).then(save)
    }

    // method1()
    // method2()
    method3()
  }

  changeText = () => {
    let asset = Expo.Asset.fromModule(md)
    Expo.FileSystem.writeAsStringAsync(asset.localUri, "Hello World");
  }

  render() {
    return (
        <ScrollView style={{maxHeight: "90%"}}>
          <Button onPress={this.fetch} title="Refetch"/>
          <Button onPress={this.changeText} title="Change Text"/>
            <Markdown>{this.state.copy}</Markdown>
        </ScrollView>
    );
  }
}

просто чередуйте между тремя, чтобы увидеть разницу в журналах.