Как использовать baseURL в Reaction-native-Webview? - PullRequest
Новая
       9

Как использовать baseURL в Reaction-native-Webview?

0 голосов
/ 12 февраля 2019

Я не могу заставить параметр baseUrl работать в реагировать на родную веб-версию.Моя структура проекта выглядит следующим образом: 

root  
---> _tests _  
---> android  
-------> web  
---> ios  
---> node_modules  
---> src  
-------> components  
------------> web  
------------> MyComponent.js  
---> web

Я вставил веб-папку 3 раза, как показано (на самом деле нужно только один раз, это только для тестирования).Каждая папка «web» содержит ponies.jpg.Тем не менее, ничего не подобрано React Native.Я просто получаю 4 разбитых изображения с показом alt (т.е. «Пони»).Я также пытался использовать baseUrl: 'web /' безрезультатно.Вот код в MyComponent.js: 

import React from 'react';
import {View, Text, StyleSheet, Image} from "react-native";
import {WebView} from "react-native-webview";

var html = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="ponies.jpg" alt="Ponies" height="42" width="42">
    <img src="ponies.jpeg" alt="Ponies" height="42" width="42">
    <img src="./ponies.jpg" alt="Ponies" height="42" width="42">
    <img src="./ponies.jpeg" alt="Ponies" height="42" width="42">
</body>
</html>
`;

export default class MyComponent extends React.Component {

    render() {
        return (
            <View style = {styles.container}>
                <WebView
                    style = {styles.webview}
                    source = {{html: html, baseUrl: 'web/'}}
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        height: 350,
        width: 350
    },
    webview: {
        height: 350,
    }
})

Спасибо!

Ответы [ 2 ]

0 голосов
/ 13 февраля 2019

ОК, поэтому я нашел решение / обходной путь для Android: D На самом деле видел это в другом ответе, но собираюсь немного расширить:

  • baseUrl должен быть 'file: ///android_asset/'.

  • Затем вы создаете каталог в папке android, т.е. «root / android / app / src / main / assets» (подробности см. в этом ответе как ссылаться на актив в проекте библиотеки ).

  • Эти две папки теперь одинаковы.все, что вы вложили в ресурсы, должно быть видно в веб-обзоре.
  • ВАЖНО! Затем мне пришлось перезапустить «response-native run-android», чтобы изображение появилось.
0 голосов
/ 12 февраля 2019

В настоящее время ваша веб-папка находится внутри папки android

Добавьте веб-папку и используйте эту структуру: 

app/web/ponies.jpg

Используйте web / в качестве базового URL.

Последняя часть головоломки - добавить веб-папку в проект XCode (сделайте это в XCode).В противном случае файлы в веб-папке не будут включены в комплект, созданный для устройства ios.

Примечание: где приложение является корнем приложения.

...