Реагировать на загрузку собственного веб-представления из локальной файловой системы устройства

Я пытаюсь загрузить файлы .html, .js, .css из локальной файловой системы устройства в компонент React Native WebView. Мне удалось получить путь к файлу index.html, но указав это как url для WebView, просто выдает ошибку. Как я могу это сделать? Пожалуйста, помогите!

Ответы

Ответ 1

В ответном нативном виде теперь можно потребовать HTML файл и использовать его в качестве источника для веб-представления, подобного этому (путь относится к соответствующему файлу реакции, в котором вы его используете):

const webapp = require('./webapp/index.html');

и использовать его в WebView следующим образом:

<WebView source={webapp} />

К сожалению, это не загружает файлы CSS и JavaScript, на которые ссылаются в HTML. Решением может быть запись всех встроенных CSS и JS (например, с помощью процесса сборки).

Ответ 2

Мне удалось включить html5/javascript в проект, используя {html:, baseUrl:} как источник. Но, честно говоря, это больше похоже на удачный снимок.

<WebView source={{ html: HTML, baseUrl: 'web/' }} />

Ответ 3

Возможно, вам придется обернуть собственный собственный модуль, чтобы сделать это. React Native WebView использует UIWebView, для получения информации о загрузке локального файла смотрите здесь: https://gist.github.com/amster/9160860

Однако рекомендуется использовать WKWebView, вы можете обернуть его самостоятельно относительно легко. В настоящее время существует репо, которое является WIP: https://github.com/qrush/react-native-wkwebview

В этом ответе можно найти выполнение загрузки локальных ресурсов с помощью WKWebView: fooobar.com/questions/58385/...

Ответ 4

Поместите этот script в любой файл ReactNative или ваш код, рекомендуемый для первого или верхнего индексного файла. И это исправит проблему, протестированную на RN0.39

import { Platform } from 'react-native';
import { setCustomSourceTransformer } from 'react-native/Libraries/Image/resolveAssetSource';

setCustomSourceTransformer(function (resolver) {

  if (Platform.OS === 'android'
    && !resolver.serverUrl
    && !resolver.bundlePath
    && resolver.asset.type === 'html') {
    resolver.bundlePath = '/android_asset/';
  }

  return resolver.defaultAsset();
});