C:\> explorer https://nodejs.org/en/download/
C:\> npm -v (6.14.5)
C:\> explorer https://classic.yarnpkg.com/en/docs/install/#windows-stable
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
{/* Open up App.js to start working on your app! */}
</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
source={{uri:'https://thaiall.github.io/mygitfriends/adminlte_mygitfriends.htm'}}
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'
// npm install --save react-native-webview (มีปัญหากับรุ่น 10.9.2)
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)
/*
Successfully built standalone app: https://expo.io/artifacts/6ba79fc2-3ab3-4d0d-b185-e86b5aea4af3
mygitfriends-5c4dafb5-280c-45bb-844f-90997f4e62ee-simulator.tar.gz (50 MB)
จบ process เท่านี้
*/
> ? 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://bit.ly/2VtGWhU หรือ https://www.icloud.com/ หรือ https://appleid.apple.com/account#!&page=create
> ? 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"
}
}
}
