react-native-webview.git

Background.tsx 1.2KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. import React, {Component} from 'react';
  2. import {Text, View} from 'react-native';
  3. import WebView from 'react-native-webview';
  4. const HTML = `
  5. <!DOCTYPE html>\n
  6. <html>
  7. <head>
  8. <title>Hello World</title>
  9. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  10. <meta name="viewport" content="width=320, user-scalable=no">
  11. <style type="text/css">
  12. body {
  13. margin: 0;
  14. padding: 0;
  15. font: 62.5% arial, sans-serif;
  16. background: transparent;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <p>HTML content in transparent body.</p>
  22. </body>
  23. </html>
  24. `;
  25. type Props = {};
  26. type State = {
  27. backgroundColor: string,
  28. };
  29. export default class Background extends Component<Props, State> {
  30. state = {
  31. backgroundColor: '#FF00FF00'
  32. };
  33. render() {
  34. return (
  35. <View>
  36. <View style={{backgroundColor:'red'}}>
  37. <View style={{ height: 120 }}>
  38. <WebView
  39. source={{html: HTML}}
  40. automaticallyAdjustContentInsets={false}
  41. style={{backgroundColor:'#00000000'}}
  42. />
  43. </View>
  44. </View>
  45. <Text>WebView is transparent contained in a View with a red backgroundColor</Text>
  46. </View>
  47. );
  48. }
  49. }