C:\> explorer https:
C:\> npm -v (6.14.5)
C:\> explorer https:
C:\> yarn -v (1.22.4)
C:\> npm install -g expo-cli
C:\> expo -V (3.28.0)
C:\> expo whoami
Logged
in
as thaiall
C:\> npm install -g react-native-cli
C:\> react-native -v (react-native-cli: 2.0.1 react-native: 0.63.3)
C:\> create-react-native-app helloweb (รอคอย 12 นาที)
> Default
new
app
C:\helloweb> cd helloweb
C:\helloweb> notepad app.js
import { StatusBar } from
'expo-status-bar'
;
import React from
'react'
;
import { StyleSheet, Text, View } from
'react-native'
;
export
default
function
App() {
return
(
<View style={styles.container}>
<Text>hello world
{
}
</Text>
<StatusBar style=
"auto"
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:
'#fff'
,
alignItems:
'center'
,
justifyContent:
'center'
,
},}
);
---
C:\helloweb> notepad app.json
{
"name"
:
"helloweb"
,
"displayName"
:
"helloweb"
,
"expo"
: {
"name"
:
"helloweb"
,
"slug"
:
"helloweb"
,
"version"
:
"1.0.0"
,
"assetBundlePatterns"
: [
"**/*"
]
}
}
---
C:\helloweb> yarn web หรือ npm run web (รอ Starting Metro Bundler. และแสดงผลใน browser อย่างถูกต้อง)
---
Mobile : ใช้ expo app สแกน qr code พบคำว่า hello world บน smart phone
---
C:\> create-react-native-app mygitfriends
> Default
new
app (รอคอย 12 นาที)
C:\> cd mygitfrinds
C:\mygitfrinds> npm run web หรือ yarn web (รอประมวล webpack 3 นาที)
1. พบการแสดงผลใน Browser - localhost:19006
2. เปิด expo app สั่ง scan qr code เปิดบน smartphone ได้เลย
---
ปรับ code
สร้าง folder ชื่อ assets มี 2 แฟ้มในห้องนี้ คือ icon.png และ splash.png
---
C:\mygitfrinds> notepad app.json
{
"expo"
: {
"name"
:
"My git friends"
,
"slug"
:
"mygitfriends"
,
"privacy"
:
"public"
,
"sdkVersion"
:
"39.0.0"
,
"platforms"
: [
"android"
,
"ios"
],
"version"
:
"1.0.0"
,
"orientation"
:
"portrait"
,
"icon"
:
"./assets/icon.png"
,
"splash"
: {
"image"
:
"./assets/splash.png"
,
"resizeMode"
:
"contain"
,
"backgroundColor"
:
"#ffffff"
},
"updates"
: {
"fallbackToCacheTimeout"
: 0},
"assetBundlePatterns"
: [
"**/*"
],
"android"
: {
"package"
:
"com.thaiall.mygitfriends"
}
}
}
---
C:\mygitfrinds> notepad app.js
import React, { Component } from
'react'
;
import { WebView } from
'react-native-webview'
;
export
default
class App extends Component {
render() {
return
(
<WebView
style={{marginTop: 20}}
/>
);
}
}
---
C:\mygitfrinds> yarn web หรือ npm run web
---
ไม่พบ webview
Module not found: Can
't resolve '
react-native-webview
' in '
C:\Users\LAB\mygitfriends'
C:\mygitfrinds> npm install --save react-native-webview@10.7.0 (รอคอย 5 นาที)
C:\mygitfrinds> npm audit fix (พบว่าไม่ผ่าน ต้องสั่ง npm install แก้ปัญหา Missing: expo-splash-screen@~0.6.2)
C:\mygitfrinds> npm install (เพื่อติดตั้ง package เพิ่ม)
C:\mygitfrinds> npm audit fix (ซ่อม เท่าที่ซ่อมได้ แต่ไม่ทั้งหมด ต้องปล่อยไป)
C:\mygitfrinds> npm run web
---
Mobile : ใช้ expo app สแกน qr code พบคำว่า hello world บน smart phone
---
C:\mygitfrinds> expo build:android
> ? Would you like to proceed? (Y/n)
> apk
> Generate
new
keystore (รอคอย 3 นาที)
---
C:\mygitfrinds> expo build:ios
> ? Would you like to proceed? (Y/n)
> ? What would you like your iOS bundle identifier to be? (com.thaiall.mygitfriends)
> ? Choose the build type you would like: » - Use arrow-keys. Return to submit.
- archive - Deploy the build to the store (Apple ID required)
- * simulator - Run the build on simulator (Build)
> ? Do you have access to the Apple account that will be used
for
submitting
this
app to the App Store? (Y/n)
- No
> ? Will you provide your own Apple Distribution Certificate? » - Use arrow-keys. Return to submit.
- Let Expo handle the process
- I want to upload my own file
> อ่านเพิ่มที่ https:
> ? Apple ID
> ? Password
Authenticating to Apple Developer Portal...
Authentication
with
Apple Developer Portal failed!
Failed to set up Distribution Certificate
ไม่ได้ไปต่อตรงนี้
---
C:\mygitfrinds> notepad app.json
พบการปรับปรุงอัตโนมัติใน app.json กรณีสั่ง build:ios แบบ archive ที่ต้องใช้ Apple ID
{
"expo"
: {
"name"
:
"My git friends"
,
"slug"
:
"mygitfriends"
,
"privacy"
:
"public"
,
"sdkVersion"
:
"39.0.0"
,
"platforms"
: [
"android"
,
"ios"
],
"version"
:
"1.0.0"
,
"orientation"
:
"portrait"
,
"icon"
:
"./assets/icon.png"
,
"splash"
: {
"image"
:
"./assets/splash.png"
,
"resizeMode"
:
"contain"
,
"backgroundColor"
:
"#ffffff"
},
"updates"
: {
"fallbackToCacheTimeout"
: 0
},
"assetBundlePatterns"
: [
"**/*"
],
"android"
: {
"package"
:
"com.thaiall.mygitfriends"
},
"ios"
: {
"bundleIdentifier"
:
"com.thaiall.mygitfriends"
}
}
}