(React Native) Загрузка локального HTML файла в WebView

Я пытаюсь загрузить локальный файл .html в WebView в React Native:

// load local .html file
const PolicyHTML = require('./Policy.html');

// PolicyHTML is just a number of '1'
console.log('PolicyHTML:', PolicyHTML);

// will cause an error: JSON value '1' of type NSNumber cannot be converted to NSString
<WebView html={PolicyHTML} />

Файл .html следует читать как строку, а не как представитель ресурса.

Как загрузить файл .html в WebView в React Native?

Кстати, каков тип этих представителей ресурсов из require()? Это number?

Ответы

Ответ 1

попробуй:

const PolicyHTML = require('./Policy.html');

<WebView
  source={PolicyHTML}
  style={{flex: 1}}
 />

Ответ 2

Я сталкиваюсь с этим сообщением, ищущим загрузку статического html.
Если ваш html-код извлекается с использованием, например, API, вы можете визуализировать WebView таким образом:

<WebView
    originWhitelist={['*']}
    source={{ html: html, baseUrl: '' }}
/>

Обратите внимание, что originWhitelist требуется, как описано в документации:

Обратите внимание, что для статического html потребуется установка originWhitelist, например, в [* *].

Ответ 3

<View style={{flex: 1}}>
    <WebView
      style={{flex: 1}}
      source={require("./resources/index.html")}
    />
</View>

Чтобы сделать WebView, родитель должен иметь размерность или гибкость: 1. Мы могли бы настроить WebView на гибкость: 1 тоже, чтобы он заполнил родителя.

Ответ 4

Попробуй это:

  • Добавьте ваш.html файл в свой проект.

  • Напишите такие строки кода в файле, где вы хотите использовать компонент WebView

    const OurStoryHTML = require ('./OurStory.html')

  • <WebView source={OurStoryHTML} style={{flex: 1, marginTop: 44}}/>

Это может вам помочь.

Ответ 5

Прежде всего, забудьте о Webview от реактивного-нативного, так как в следующем выпуске он будет устаревшим, вы увидите " Загрузить локальный HTML файл или URL-адрес в React Native с использованиема-". Так что я использовал в своем проекте response-native-webview, и теперь он работает нормально.

Точка, которую следует отметить:

  1. Вы должны управлять двумя копиями вашего HTML файла.
  2. Для IOS поместите копию в Project> resources> index.html.
  3. Для Android вам нужно поместить его в проект> android> app> src> main> assets> index.html

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

if(isAndroid){
  return (
      <WebView
        style={{flex: 1}}
        originWhitelist={['*']}
        source={{uri:'file:///android_asset/index.html'}}
        style={{ marginTop: 20 }}
        javaScriptEnabled={true}
        domStorageEnabled={true}
      />
  )
}else{
  return(
    <WebView
      style={{flex: 1}}
      originWhitelist={['*']}
      source={'./resources/index.html'}
      style={{ marginTop: 20 }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
    />
  );
}