2.\uc6f9\ubdf0(webview)<\/strong><\/p>\n\n\n\n-\ube0c\ub77c\uc6b0\uc800\ucc98\ub7fc \uc6f9\uc0ac\uc774\ud2b8\ub97c \ubcf4\uc5ec\uc8fc\ub294 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4.
It displays websites like a browser.<\/p>\n\n\n\n
-\uadf8\ub9b0\uceec\ub7ec \ubd80\ubd84\uc774 \uc6f9\ubdf0\uc5d0 \ub300\ud55c \ucf54\ub4dc\uc785\ub2c8\ub2e4.
The green colored part is the code for the web view.<\/p>\n\n\n\n
-\uc6f9\ubdf0\ub294 \ud06c\uae30\ub97c \uc9c0\uc815\ud558\uc9c0 \uc54a\uc73c\uba74 \ubaa8\ubc14\uc77c \ud654\uba74\uc5d0 \ubcf4\uc774\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.
The webview will not be visible on the mobile screen if you do not specify its size.<\/p>\n\n\n\n
-\uc774 \ucf54\ub4dc\ub294 \uc6f9\ubdf0\uc0ac\uc774\uc988 \ud654\uba74 \ud06c\uae30\ub9cc\ud07c \uc124\uc815\ud558\ub294 \ubd80\ubd84\uc785\ub2c8\ub2e4.
This code sets the web view size to the screen size.<\/p>\n\n\n\n
const windowWidth = Dimensions.get('window').width;\nconst windowHeight = Dimensions.get('window').height;<\/code><\/pre>\n\n\n\n-\uc6f9\ubdf0 \uc18d\uc131\uc740 \ub9ce\uc9c0\ub9cc \uba87\uac00\uc9c0 \uc911\uc694\ud55c \uac83\ub9cc \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.
There are many webview properties, but let’s look at just a few important ones.<\/p>\n\n\n\n
\n- source={{ uri: ‘https:\/\/freelifemakers.org’ }}
\uc6f9\ubdf0\uc2e4\ud589\uc2dc \uc624\ud508\ub420 \uc6f9\uc0ac\uc774\ud2b8 \uc8fc\uc18c\ub97c \uc124\uc815\ud569\ub2c8\ub2e4.
Set the website address to be opened when running the web view.<\/li>\n<\/ul>\n\n\n\n\n- allowsFullscreenVideo={true}
\uc804\uccb4\ud654\uba74 \uae30\ub2a5\uc744 \uc0ac\uc6a9\ud558\ub294 \uc124\uc815\uc785\ub2c8\ub2e4.
This setting uses the full screen function.<\/li>\n<\/ul>\n\n\n\n\n- allowsInlineMediaPlayback={true}
\ud398\uc774\uc9c0 \uc2a4\ud06c\ub864\uc774\ub098 \ub3d9\uc601\uc0c1 \ud50c\ub808\uc774\uc5b4 \uc0ac\uc774\uc988 \ubcc0\ud658\uc2dc\uc5d0\ub3c4 \ub3d9\uc601\uc0c1 \uc7ac\uc0dd\uc744 \uba48\ucd94\uc9c0 \uc54a\uac8c \ud569\ub2c8\ub2e4.
Video playback does not stop even when the page scrolls or the video player size changes.<\/li>\n<\/ul>\n\n\n\n\n- javaScriptEnabled={true}
\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc0ac\uc6a9\uc744 \ud5c8\uc6a9\ud558\ub294 \uc124\uc815\uc785\ub2c8\ub2e4.
This setting allows the use of JavaScript.<\/li>\n<\/ul>\n\n\n\n\n- scalesPageToFit={true}
\uc6f9\ubdf0\ud06c\uae30\ub97c \ud398\uc774\uc9c0 \ud06c\uae30\uc5d0 \ub9de\uac8c \uc124\uc815\ud569\ub2c8\ub2e4.
Set the webview size to match the page size.<\/li>\n<\/ul>\n\n\n\n\n- domStorageEnabled={true}
html dom\uc800\uc7a5\uc18c\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.
Uses html dom storage.<\/li>\n<\/ul>\n\n\n\n3.\uc0c1\ud0dc\ud45c\uc2dc\uc904( Status Bar )<\/strong>
– \ubcf4\ub77c\uc0c9 \ubd80\ubd84\uc758 \ucf54\ub4dc\ub294 \uc0c1\ud0dc\ud45c\uc2dc\uc904 \ubd80\ubd84 \ucf54\ub4dc\uc785\ub2c8\ub2e4.
The purple code part is the status bar code.
– \uc0c1\ud0dc\ud45c\uc2dc\uc904\uc740 \ubaa8\ubc14\uc77c \ud3f0\uc5d0\uc11c \uc2dc\uac04,\ubc30\ud130\ub9ac\ub7c9\uc774 \ud45c\uc2dc\ub418\ub294 \ubd80\ubd84\uc785\ub2c8\ub2e4.
The status bar is the part of your mobile phone that displays the time and battery level.<\/p>\n\n\n\n <StatusBar\n barStyle=\"light-content\" \/\/ Options: 'default', 'light-content', 'dark-content'\n backgroundColor=\"#6a51ae\" \/\/ For Android\n hidden={false} \/\/ Show or hide the status bar\n translucent={true} \/\/ Allow content to render under the status bar\n \/><\/code><\/pre>\n\n\n\n4.\uc804\uccb4\ucf54\ub4dc(full code)<\/strong><\/p>\n\n\n\nimport { StatusBar,StyleSheet, Text, View ,Dimensions } from 'react-native';\nimport { WebView } from 'react-native-webview';\nimport * as React from 'react';\n\n\nconst windowWidth = Dimensions.get('window').width;\nconst windowHeight = Dimensions.get('window').height;<\/mark>\n\nexport default function App() {\n\n return (\n <\/mark> <View style={styles.container}>\n\n <Text>Web View<\/Text>\n <WebView style={styles.webview} \n source={{ uri: 'https:\/\/freelifemakers.org' }}\n allowsFullscreenVideo={true}\n allowsInlineMediaPlayback={true}\n javaScriptEnabled={true}\n scalesPageToFit={true}\n domStorageEnabled={true}\n \/><\/mark>\n <StatusBar\n barStyle=\"light-content\" \/\/ Options: 'default', 'light-content', 'dark-content'\n backgroundColor=\"#6a51ae\" \/\/ For Android\n hidden={false} \/\/ Show or hide the status bar\n translucent={true} \/\/ Allow content to render under the status bar\n \/><\/mark>\n \n <\/View>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n backgroundColor: '#fff',\n alignItems: 'center',\n justifyContent: 'center',\n },\n \/\/\uc6f9\ubdf0 \ud06c\uae30 \uc9c0\uc815 \/ Specify webview size\n webview: {\n flex: 1,\n width: windowWidth,\n height: windowHeight,\n }<\/mark>, \n});\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\ucf54\ub4dc\uac00 \uae38\uc9c0 \uc54a\uc544 \ub9ce\uc740 \uc124\uba85\uc774 \ud544\uc694\ud558\uc9c4 \uc54a\uc9c0\ub9cc \uc911\uc694\ud55c \uac83\ub9cc \uc598\uae30\ud558\uaca0\uc2b5\ub2c8\ub2e4.The code isn’t long so it doesn’t need much explanation, but I’ll just mention the important things. \uc6f9\ubdf0\uc5d0\uc11c \uc811\uc18d \uc624\ub958\ubc1c\uc0dd\ud560 \uacbd\uc6b0 \uc544\ub798\uc758 \ud3ec\uc2a4\ud2b8\ub97c \ucc38\uace0 \ud558\uc138\uc694If a connection error occurs in web view, please refer to the post below. \uc6f9\ubdf0\uc5d0\ub7ec\/webview error 1.import-import\uad6c\ubb38\uc740 \ubaa8\ub4c8\uc744 \ucd94\uac00\ud558\ub294 \ubd80\ubd84\uc785\ub2c8\ub2e4. The import […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,1],"tags":[],"class_list":["post-947","post","type-post","status-publish","format-standard","hentry","category-reactnative","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=947"}],"version-history":[{"count":8,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/947\/revisions"}],"predecessor-version":[{"id":956,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/947\/revisions\/956"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}