Как загрузить локальный html файл в react-native?

@magdalen_kub 

В React Native есть компонент WebView, который позволяет загружать и отображать HTML-код или веб-страницы.

Для загрузки локального HTML файла вы можете использовать путь к файлу на вашем устройстве в качестве источника данных для WebView. Предположим, у нас есть файл index.html в папке assets в корне проекта:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import React from 'react';
import { WebView } from 'react-native-webview';

const App = () => {
  return (
    <WebView
      source={{ uri: 'file:///android_asset/index.html' }}
      // Для iOS замените на: source={{ uri: 'file:///path/to/index.html' }}
    />
  );
};

export default App;

Здесь мы используем file:///android_asset/ для платформы Android и file:///path/to/ для iOS. Вы можете заменить соответствующий путь для своего файла HTML.

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

@magdalen_kub 

Также важно помнить об установке разрешений для работы с локальными файлами в файле AndroidManifest.xml для Android:

1
2

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

И для iOS в файле Info.plist необходимо добавить разрешения:

1
2
3
4
5
6
7
8
9

<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your description</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Your description</string>
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Таким образом, вы сможете загрузить и отобразить локальный HTML файл в React Native приложении с использованием компонента WebView.