WebView в ReactNative можно использовать для загрузки веб-контента в собственном представлении. Недавно мне пришлось интегрировать внешний веб-виджет в свое приложение со структурой, как показано ниже:
В index.html есть ссылки на javascript внутри папки js и стили внутри папки css.
TL; DR
- Скопируйте статический 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
- Создайте папку с активами, нажав Файл- ›Создать-› Папка- ›Папка с активами в студии Android.
- Добавьте виджет в папку с ресурсами, как показано ниже:
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
- Перейдите в 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
Последний пример кода можно найти здесь.