\uc774 \ucf54\ub4dc\ub294 \ud30c\uc77c\uc774 App\uc778 \ud30c\uc77c\uc744 \ud638\ucd9c \ud558\ub294 \ucf54\ub4dc \uc785\ub2c8\ub2e4.
This code calls the file that name is App.<\/p>\n\n\n\n
\uc571\uc774 \uc2e4\ud589\ub420\ub54c index.js\ud30c\uc77c\uc774 \uc2e4\ud589\ub418\uace0 index.js\ud30c\uc77c\uc5d0\uc11c App.tsx\ub098 App.js\ud30c\uc77c\uc744 \ud638\ucd9c\ud569\ub2c8\ub2e4. 2.App.tsx\ud30c\uc77c \uc774\ub984 \ubcc0\uacbd(Change App.tsx file name)<\/strong><\/p>\n\n\n\n -\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0ac\uc6a9\ud558\uae30\uc704\ud574\uc11c \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8 \ud30c\uc77c\uc758 \uc774\ub984\uc744 \ubc14\uafc9\ub2c8\ub2e4. 3.App.js\ud30c\uc77c \ub9cc\ub4e4\uae30(Create App.js file)<\/strong><\/p>\n\n\n\n 4.App.js\uc5d0 \ucf54\ub4dc \uc785\ub825(Enter code in App.js<\/strong>)<\/p>\n\n\n\n 5.react-native-webview\ubaa8\ub4c8\uc124\uce58(Install react-native-webview module)<\/strong><\/p>\n\n\n\n 6.\ubaa8\ub4c8\uc124\uce58\ud655\uc778(Check module installation)<\/strong> 7.\uc571\uc2e4\ud589\ud654\uba74(App execution screen)<\/strong><\/p>\n\n\n\n -npm run android\ub85c \uc571\uc744 \uc2e4\ud589 \ud569\ub2c8\ub2e4. -\ube44\uc8fc\uc5bc \uc2a4\ud29c\ub514\uc624 \ucf54\ub4dc\uc5d0\uc11c \uc2e4\ud589\ub41c \ud654\uba74\uc785\ub2c8\ub2e4. -\uac00\uc6b4\ub370 \uba54\ud2b8\ub85c \ud654\uba74\uc740 npm run android\uc2e4\ud589\uc2dc \uc790\ub3d9\uc73c\ub85c \uc2e4\ud589\ub429\ub2c8\ub2e4. -\ubaa8\ubc14\uc77c\ud3f0\uc5d0\uc11c \uc2e4\ud589\ub41c \ud654\uba74,\uc67c\ucabd \uc774\ubbf8\uc9c0\ub294 \uc571\uc2e4\ud589\ub41c \ud654\uba74,\uc624\ub978\ucabd \uc774\ubbf8\uc9c0\uc758 App1\uc544\uc774\ucf58\uc740 \uc571 \uc124\uce58\ub41c \ud654\uba74\uc785\ub2c8\ub2e4. 8.App.js\uc804\uccb4\ucf54\ub4dc(App.js full code) <\/strong><\/p>\n\n\n\n – \ucf54\ub4dc\uc124\uba85\uc740 \ub2e4\uc74c \ud3ec\uc2a4\ud2b8\uc5d0\uc11c \ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc774\ubc88\uc5d0\ub294 \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c\uc5d0\uc11c \uac04\ub2e8\ud558\uac8c \uc6f9\ubdf0\ub97c \uad6c\ud604\ud574 \ubd05\ub2c8\ub2e4.This time, we will simply implement a web view in React Native. \uc6f9\ubdf0\ub294 \ubaa8\ubc14\uc77c\uc5d0\uc11c \uc6f9\ud398\uc774\uc9c0\ub97c \ubcfc \uc218 \uc788\uac8c \ud574\uc8fc\ub294 \ubaa8\ub4c8 \uc785\ub2c8\ub2e4.Webview is a module that allows you to view web pages on mobile devices. \ub9ac\uc561\ud2b8\ub124\uc774\ud2f0\ube0c\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc640 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\ub97c \ubaa8\ub450 \uc0ac\uc6a9 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.React Native can use both JavaScript and TypeScript. \uc5ec\uae30\uc11c\ub294 […]<\/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-919","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\/919","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=919"}],"version-history":[{"count":8,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/919\/revisions"}],"predecessor-version":[{"id":945,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/919\/revisions\/945"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=919"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
When the app runs, the index.js file is executed and the index.js file calls the App.tsx or App.js file<\/p>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/1index_js.png\")
<\/figure>\n\n\n\n
Rename the TypeScript file to use JavaScript.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/2app_tsx_directory.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/3App_txkBackup.png\")
<\/figure>\n<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/4newFile.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/5App_js.png\")
<\/figure>\n<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/6App_js2.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/7npm_webview.png\")
<\/figure>\n\n\n\n
-npm run android\ub85c \uc571\uc744 \uc2e4\ud589 \ud569\ub2c8\ub2e4.
Run the app with npm run android.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/8package_json.png\")
<\/figure>\n\n\n\n
Run the app with npm run android.<\/p>\n\n\n\n
This is a screen executed in Visual Studio Code.<\/p>\n\n\n\n
The metro screen in the middle runs automatically when you run “npm run android”.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/9npm_run_android-1024x743.png\")
<\/figure>\n\n\n\n
Screen running on a mobile phone. The image on the left is the screen with the app running, and the App1 icon in the image on the right is the screen with the app installed.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/10mobile-461x1024.jpg\"){kind=spacer}
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/11mobile-461x1024.jpg\"){kind=spacer}
<\/figure>\n<\/figure>\n\n\n\n
Code explanation will be provided in the next post.<\/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;\n\nexport default function App() {\n\n return (\n <View style={styles.container}>\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 \/>\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 \/>\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\n webview: {\n flex: 1,\n width: windowWidth,\n height: windowHeight,\n }, \n});\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"