web-dev-qa-db-ja.com

（React Native）ローカルHTMLファイルをWebViewにロードします

ローカルの_.html_ファイルをReact NativeのWebViewにロードしようとしています。

_// 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 in React Native）にロードするにはどうすればよいですか？

ところで、require()からのそれらのリソース代表のタイプは何ですか？ numberですか？

webviewreact-native
21
李岡諭

それを試してみてください：

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

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

静的htmlを読み込むためにこの投稿を検索します。
APIなどを使用してHTMLコードを取得する場合、次の方法でWebViewをレンダリングできます。

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

ドキュメント で説明されているように、originWhitelistが必要であることに注意してください。

静的HTMLでは、たとえば["*"]にoriginWhitelistを設定する必要があることに注意してください。

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

WebViewを作成するには、親にディメンションまたはフレックスが必要です：1。 WebViewをflex：1に設定して、親を満たすようにすることもできます。

3
stevemu

まず、次のリリースで非推奨になるため、react-nativeのWebviewを忘れてください ローカルHTMLファイルまたはURLをReact native-webview 。だから、プロジェクトでreact-native-webviewを使用しましたが、今は正常に動作しています。

注意すべき点：

  1. HTMLファイルの2つのコピーを管理する必要があります。
  2. IOS Project> resources> index.htmlにコピーを配置します。
  3. Androidの場合は、project> Android> app> src> main> assets> index.htmlに配置する必要があります

そして、webviewをロードしている間、プラットフォームを見つけて、このような他のものを使用してロードしてみてください。

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}
    />
  );
}
2
snehal agrawal

これを試して ：

  • プロジェクトに。htmlファイルを追加します。

  • WebViewコンポーネントを使用するファイルにこのようなコード行を記述します

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

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

それはあなたを助けるかもしれません。

0
Pankaj Sharma