WebView в ReactNative можно использовать для загрузки веб-контента в собственном представлении. Недавно мне пришлось интегрировать внешний веб-виджет в свое приложение со структурой, как показано ниже:

В index.html есть ссылки на javascript внутри папки js и стили внутри папки css.

TL; DR

  1. Скопируйте статический html (например, - index.html) и его ресурсы для загрузки в веб-представлении по следующим путям:
  • Android: ‹react-native-project› / android / app / src / main / assets /
  • iOS: ‹react-native-project› / ios / ‹новая группа как папка› / (Примечание: «Новая группа как папка» гарантирует, что все ее содержимое будет объединено в файл IPA.)

2. WebView должен иметь опору uri для iOS и Android, как показано ниже:

const isAndroid=  Platform.OS==='android'
..... ..... .....
<WebView source:{{uri: isAndroid?'file:///android_asset/widget/index.html'
        :'./external/widget/index.html'}}/>

4. Вы можете найти образец кода здесь.

Первый подход

import React, { Component } from 'react'
import {WebView} from 'react-native'
import Widget from './external/widget/index.html'
class ExternalWidget extends Component {
   render()
   {
       <WebView source={Widget} scalesPageToFit/>
   }
}
export default ExternalWidget

Это отлично работало при работе в режиме отладки на симуляторе / эмуляторе / реальном устройстве.

Проблема с режимом выпуска: - В пакет apk / app / ipa входит только html. Зависимости игнорируются, и поэтому HTML не работает должным образом.

Окончательный подход

Нам нужно добавить зависимости виджета вместе с html в каталог собственных ресурсов как для Android, так и для iOS, как описано ниже: -

Android

  1. Создайте папку с активами, нажав Файл- ›Создать-› Папка- ›Папка с активами в студии Android.
  2. Добавьте виджет в папку с ресурсами, как показано ниже:

3. Код для внешнего виджета будет следующим:

import React, { Component } from 'react'
import {WebView} from 'react-native'
class ExternalWidget extends Component {
   render()
   {
      <WebView 
         source={{uri:'file:///android_asset/widget/index.html'}} 
         scalesPageToFit/>
   }
}
export default ExternalWidget

IOS

  1. Перейдите в xcode- ›главную папку приложения -› добавьте новую группу с папкой с именем «external» - ›добавьте файлы виджетов, как показано ниже:

2. Код внешнего виджета будет таким:

import React, { Component } from 'react'
import {WebView} from 'react-native'
class ExternalWidget extends Component {
   render()
   {
      <WebView source={{uri:'./external/widget/index.html'}} 
         scalesPageToFit/>
   }
}
export default ExternalWidget

Последний пример кода можно найти здесь.