{"id":1,"date":"2015-06-01T07:34:20","date_gmt":"2015-06-01T07:34:20","guid":{"rendered":"https:\/\/blog.chaiyakul.com\/?p=1"},"modified":"2023-09-25T07:01:35","modified_gmt":"2023-09-25T07:01:35","slug":"react-native-basic","status":"publish","type":"post","link":"https:\/\/blog.chaiyakul.com\/index.php\/2015\/06\/01\/react-native-basic\/","title":{"rendered":"\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07 React-Native \u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19"},"content":{"rendered":"\n<p><strong>cmd set path<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: powershell; title: ; notranslate\" title=\"\">\nset PATH=%LOCALAPPDATA%\\Android\\Sdk\\platform-tools\nset ANDROID_HOME=%LOCALAPPDATA%\\Android\\Sdk\n<\/pre><\/div>\n\n\n<style> .syntaxhighlighter{ width: auto !important; } <\/style>\n\n\n\n<p>Setting up the development environment<br>\u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07 <a href=\"https:\/\/reactnative.dev\/docs\/environment-setup\">https:\/\/reactnative.dev\/docs\/environment-setup<\/a><\/p>\n\n\n\n<p><strong>\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e04<\/strong> [\u0e23\u0e30\u0e1a\u0e38 Ver 0.68.2 \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e21\u0e35\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e19\u0e49\u0e2d\u0e22\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14]<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: powershell; title: ; notranslate\" title=\"\">\nnpx react-native init &#x5B;\u0e0a\u0e37\u0e48\u0e2d\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e04] --version 0.68.2\n<\/pre><\/div>\n\n\n<p><strong>Publishing to Google Play Store<\/strong><br>\u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07 <a href=\"https:\/\/reactnative.dev\/docs\/signed-apk-android\">https:\/\/reactnative.dev\/docs\/signed-apk-android<\/a><\/p>\n\n\n\n<p><em>Generating an upload key<\/em><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: powershell; title: ; notranslate\" title=\"\">\nkeytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000\n<\/pre><\/div>\n\n\n<p><em>Setting up Gradle variables<\/em><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Place the my-upload-key.keystore file under the android\/app directory in your project folder.<\/li>\n\n\n\n<li>Edit the file ~\/.gradle\/gradle.properties or android\/gradle.properties, and add the following (replace <strong>*<\/strong> with the correct keystore password, alias and key password),<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nMYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore\nMYAPP_UPLOAD_KEY_ALIAS=my-key-alias\nMYAPP_UPLOAD_STORE_PASSWORD=*****\nMYAPP_UPLOAD_KEY_PASSWORD=*****\n<\/pre><\/div>\n\n\n<p><em>Adding signing config to your app&#8217;s Gradle config<\/em><br>The last configuration step that needs to be done is to setup release builds to be signed using upload key. Edit the file android\/app\/build.gradle in your project folder, and add the signing config,<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n...\nandroid {\n    ...\n    defaultConfig { ... }\n    signingConfigs {\n        release {\n            if (project.hasProperty(&#039;MYAPP_UPLOAD_STORE_FILE&#039;)) {\n                storeFile file(MYAPP_UPLOAD_STORE_FILE)\n                storePassword MYAPP_UPLOAD_STORE_PASSWORD\n                keyAlias MYAPP_UPLOAD_KEY_ALIAS\n                keyPassword MYAPP_UPLOAD_KEY_PASSWORD\n            }\n        }\n    }\n    buildTypes {\n        release {\n            ...\n            signingConfig signingConfigs.release\n        }\n    }\n}\n...\n<\/pre><\/div>\n\n\n<p><strong>\u0e23\u0e31\u0e19\u0e1a\u0e19 android emu<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: powershell; title: ; notranslate\" title=\"\">\nnpx react-native run-android\n<\/pre><\/div>\n\n\n<p><strong>\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 icon android<\/strong><br>URL \u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e02\u0e19\u0e32\u0e14\u0e23\u0e39\u0e1b icon : <a href=\"http:\/\/romannurik.github.io\/AndroidAssetStudio\/icons-launcher.html\">http:\/\/romannurik.github.io\/AndroidAssetStudio\/icons-launcher.html<\/a><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e17\u0e35\u0e48\u0e40\u0e01\u0e47\u0e1a\u0e23\u0e39\u0e1b YourProject -&gt; android -&gt; app -&gt; src -&gt; main -&gt; res\n<\/pre><\/div>\n\n\n<p><strong>\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e0a\u0e37\u0e48\u0e2d App [For Android]<\/strong><br>Modify displayName in app.json file<br>Modify app_name in android\/app\/src\/main\/res\/values\/strings.xml<br>then Run these commands one by one<\/p>\n\n\n\n<p><strong>Run Android \u0e41\u0e1a\u0e1a\u0e25\u0e49\u0e32\u0e07\u0e41\u0e04\u0e0a<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: powershell; title: ; notranslate\" title=\"\">\ncd android\n.\/gradlew clean\ncd ..\nreact-native run-android\n<\/pre><\/div>\n\n\n<p><strong>Generating the release AAB<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: powershell; title: ; notranslate\" title=\"\">\ncd android\n.\/gradlew bundleRelease\n<\/pre><\/div>\n\n\n<p>The generated AAB can be found under android\/app\/build\/outputs\/bundle\/release\/app-release.aab, and is ready to be uploaded to Google Play.<\/p>\n\n\n\n<p><strong>\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 version code build \u0e01\u0e23\u0e13\u0e35\u0e08\u0e30 update app play store<\/strong><br>\u0e17\u0e35\u0e48\u0e44\u0e1f\u0e25\u0e4c android &gt; app &gt; build.gradle \u0e15\u0e23\u0e07\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14 versionCode \u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14\u0e17\u0e35\u0e48 141<\/p>\n\n\n\n<p><strong>\u0e25\u0e1a npm package<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: powershell; title: ; notranslate\" title=\"\">\nnpm uninstall   &#x5B;package-name]\n<\/pre><\/div>\n\n\n<p><strong>\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07 npm package \u0e23\u0e30\u0e1a\u0e38\u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e48\u0e19<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: powershell; title: ; notranslate\" title=\"\">\nnpm install &#x5B;package-name]@&#x5B;version-number]\n<\/pre><\/div>\n\n\n<p><em>\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07<\/em><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: powershell; title: ; notranslate\" title=\"\">\nnpm install react-native-webview@7.5.1\n<\/pre><\/div>\n\n\n<p><strong>\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e23\u0e30\u0e14\u0e31\u0e1a API \u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22 Android \u0e40\u0e1b\u0e47\u0e19 API \u0e23\u0e30\u0e14\u0e31\u0e1a 33<\/strong><\/p>\n\n\n\n<p>\u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 31 \u0e2a\u0e34\u0e07\u0e2b\u0e32\u0e04\u0e21 2566 \u0e40\u0e1b\u0e47\u0e19\u0e15\u0e49\u0e19\u0e44\u0e1b \u0e2b\u0e32\u0e01\u0e23\u0e30\u0e14\u0e31\u0e1a API \u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e39\u0e48\u0e20\u0e32\u0e22\u0e43\u0e19 1 \u0e1b\u0e35\u0e19\u0e31\u0e1a\u0e08\u0e32\u0e01\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e34\u0e14\u0e15\u0e31\u0e27 Android \u0e23\u0e38\u0e48\u0e19\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14 \u0e04\u0e38\u0e13\u0e08\u0e30\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e41\u0e2d\u0e1b\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49<\/p>\n\n\n\n<p>\u0e2b\u0e32\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e41\u0e2d\u0e1b\u0e15\u0e48\u0e2d\u0e44\u0e1b \u0e42\u0e1b\u0e23\u0e14\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e27\u0e48\u0e32\u0e41\u0e2d\u0e1b\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e01\u0e4d\u0e32\u0e2b\u0e19\u0e14\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e1b\u0e47\u0e19 Android 13 (API \u0e23\u0e30\u0e14\u0e31\u0e1a 33)<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 : android\/build.gradle \u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14\u0e17\u0e35\u0e48 7-10<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nbuildToolsVersion = &quot;31.0.0&quot;\nminSdkVersion = 21\ncompileSdkVersion = 33\ntargetSdkVersion = 33\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>cmd set path Setting up the development environment\u0e2d\u0e49\u0e32\u0e07 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"single-no-separators","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","footnotes":""},"categories":[4],"tags":[],"class_list":["post-1","post","type-post","status-publish","format-standard","hentry","category-react-native"],"_links":{"self":[{"href":"https:\/\/blog.chaiyakul.com\/index.php\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.chaiyakul.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.chaiyakul.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.chaiyakul.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.chaiyakul.com\/index.php\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":25,"href":"https:\/\/blog.chaiyakul.com\/index.php\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":113,"href":"https:\/\/blog.chaiyakul.com\/index.php\/wp-json\/wp\/v2\/posts\/1\/revisions\/113"}],"wp:attachment":[{"href":"https:\/\/blog.chaiyakul.com\/index.php\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.chaiyakul.com\/index.php\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.chaiyakul.com\/index.php\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}