ローカルの_.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
ですか?
それを試してみてください:
const PolicyHTML = require('./Policy.html');
<WebView
source={PolicyHTML}
style={{flex: 1}}
/>
静的htmlを読み込むためにこの投稿を検索します。
APIなどを使用してHTMLコードを取得する場合、次の方法でWebViewをレンダリングできます。
<WebView
originWhitelist={['*']}
source={{ html: html, baseUrl: '' }}
/>
ドキュメント で説明されているように、originWhitelist
が必要であることに注意してください。
静的HTMLでは、たとえば["*"]にoriginWhitelistを設定する必要があることに注意してください。
<View style={{flex: 1}}>
<WebView
style={{flex: 1}}
source={require("./resources/index.html")}
/>
</View>
WebViewを作成するには、親にディメンションまたはフレックスが必要です:1。 WebViewをflex:1に設定して、親を満たすようにすることもできます。
まず、次のリリースで非推奨になるため、react-nativeのWebviewを忘れてください ローカルHTMLファイルまたはURLをReact native-webview 。だから、プロジェクトでreact-native-webviewを使用しましたが、今は正常に動作しています。
注意すべき点:
そして、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}
/>
);
}
これを試して :
WebViewコンポーネントを使用するファイルにこのようなコード行を記述します
const OurStoryHTML = require ('./OurStory.html')
<WebView source={OurStoryHTML} style={{flex: 1, marginTop : 44}} />
それはあなたを助けるかもしれません。