ภาพร่าง คร่าวๆ ของเว็บเบราว์เซอร์บนมือถือที่สร้างด้วย react-native ("แถบอเนกประสงค์" และ WebView ) อินเทอร์เฟซของเบราว์เซอร์กับเกตเวย์ API (ซึ่งในที่สุดฉันก็อาจติดตั้งบน GitHub เช่นกัน) ซึ่งทำหน้าที่เป็นการขนส่งสำหรับโปรโตคอลการกระจายอำนาจ (ปัจจุบันไม่รองรับ) ( DAT ในปัจจุบัน)
const express = require ( 'express' )
const app = express ( )
const port = 3000
const host = 'localhost'
const startUpMsg = `proxy listening on port ${ port } !`
const serveIndex = require ( 'serve-index' )
const Dat = require ( 'dat-node' )
const path = require ( 'path' )
app . use ( express . static ( __dirname + '/dats' ) )
app . use ( '/' , serveIndex ( __dirname + '/dats' ) )
app . use ( function ( req , res , next ) {
const orig = req . url
const { referer , host } = req . headers
if ( referer && / ^(/) / . test ( req . url ) ) {
// account for relative asset paths
const folder = referer . replace ( `http:// ${ host } /` , '' )
res . redirect ( `/ ${ folder . replace ( '/' , '' ) } ${ req . url } ` )
}
next ( )
} )
app . get ( '/dat/:key' , ( req , res ) => {
const { key } = req . params
Dat ( `./dats/ ${ key } ` , {
key : key
} , function ( err , dat ) {
if ( err ) throw err
dat . joinNetwork ( { } , _ => {
res . json ( {
url : `http:// ${ host } : ${ port } / ${ key } `
} )
} )
} )
} )
app . listen ( port , _ => console . log ( startUpMsg ) )โปรเจ็กต์นี้บูทด้วย Create React Native App
ด้านล่างนี้คุณจะพบข้อมูลเกี่ยวกับการปฏิบัติงานทั่วไป คู่มือเวอร์ชันล่าสุดมีอยู่ที่นี่
คุณควรอัปเดตการติดตั้ง create-react-native-app ทั่วโลกซึ่งแทบจะไม่เคยเลย
การอัปเดตการพึ่งพา react-native-scripts ของแอปของคุณควรทำได้ง่ายเพียงแค่เพิ่มหมายเลขเวอร์ชันใน package.json และติดตั้งการขึ้นต่อกันของโปรเจ็กต์ของคุณใหม่
การอัปเกรดเป็น React Native เวอร์ชันใหม่จำเป็นต้องอัปเดตเวอร์ชันแพ็กเกจ react-native , react และ expo และการตั้งค่า sdkVersion ที่ถูกต้องใน app.json ดูคู่มือการกำหนดเวอร์ชันสำหรับข้อมูลล่าสุดเกี่ยวกับความเข้ากันได้ของเวอร์ชันแพ็คเกจ
หากมีการติดตั้ง Yarn เมื่อเริ่มต้นโปรเจ็กต์ การขึ้นต่อกันจะถูกติดตั้งผ่าน Yarn และคุณควรใช้เพื่อรันคำสั่งเหล่านี้เช่นกัน แตกต่างจากการติดตั้งการพึ่งพา ไวยากรณ์การเรียกใช้คำสั่งจะเหมือนกันสำหรับ Yarn และ NPM ในขณะที่เขียนนี้
npm startเรียกใช้แอปของคุณในโหมดการพัฒนา
เปิดในแอป Expo บนโทรศัพท์ของคุณเพื่อดู ระบบจะโหลดซ้ำหากคุณบันทึกการแก้ไขในไฟล์ และคุณจะเห็นข้อผิดพลาดในการสร้างและบันทึกในเทอร์มินัล
บางครั้งคุณอาจต้องรีเซ็ตหรือล้างแคชของ React Native packager โดยคุณสามารถส่งแฟล็ก --reset-cache ไปยังสคริปต์เริ่มต้นได้:
npm start --reset-cache
# or
yarn start --reset-cache
npm testรันนักวิ่งทดสอบตลกในการทดสอบของคุณ
npm run ios เช่นเดียวกับ npm start แต่ยังพยายามเปิดแอปของคุณใน iOS Simulator หากคุณใช้ Mac และติดตั้งไว้
npm run android เช่นเดียวกับ npm start แต่ยังพยายามเปิดแอปของคุณบนอุปกรณ์ Android หรือโปรแกรมจำลองที่เชื่อมต่ออยู่ด้วย ต้องมีการติดตั้งเครื่องมือสร้าง Android (ดู React Native docs สำหรับการตั้งค่าโดยละเอียด) เราขอแนะนำให้ติดตั้ง Genymotion เป็นโปรแกรมจำลอง Android ของคุณ เมื่อคุณตั้งค่าสภาพแวดล้อมเนทิฟบิวด์เสร็จแล้ว มีสองตัวเลือกในการสร้างสำเนา adb ที่ถูกต้องสำหรับสร้าง React Native App:
adb ของ Android StudioSettings -> ADB เลือก “ใช้เครื่องมือ Android SDK แบบกำหนดเอง” และอัปเดตด้วยไดเรกทอรี Android SDK ของคุณ adb ของ Genymotion/Applications/Genymotion.app/Contents/MacOS/tools/npm run ejectสิ่งนี้จะเริ่มกระบวนการ "ดีดออก" จากสคริปต์บิลด์ของ Create React Native App คุณจะถูกถามคำถามสองสามข้อเกี่ยวกับวิธีที่คุณต้องการสร้างโครงการของคุณ
คำเตือน: การเรียกใช้ eject เป็นการดำเนินการถาวร (นอกเหนือจากระบบควบคุมเวอร์ชันที่คุณใช้) แอปที่ถูกดีดออกจะทำให้คุณต้องตั้งค่าสภาพแวดล้อม Xcode และ/หรือ Android Studio
คุณสามารถแก้ไข app.json เพื่อรวมคีย์การกำหนดค่าไว้ใต้คีย์ expo
หากต้องการเปลี่ยนชื่อที่แสดงของแอป ให้ตั้งค่าคีย์ expo.name ใน app.json ให้เป็นสตริงที่เหมาะสม
หากต้องการตั้งค่าไอคอนแอป ให้ตั้งค่าคีย์ expo.icon ใน app.json ให้เป็นเส้นทางในเครื่องหรือ URL ขอแนะนำให้คุณใช้ไฟล์ PNG ขนาด 512x512 ที่มีความโปร่งใส
โปรเจ็กต์นี้ถูกตั้งค่าเพื่อใช้เรื่องตลกในการทดสอบ คุณสามารถกำหนดค่ากลยุทธ์การทดสอบใดก็ได้ที่คุณต้องการ แต่เรื่องตลกก็ใช้งานได้ทันที สร้างไฟล์ทดสอบในไดเร็กทอรีชื่อ __tests__ หรือใช้นามสกุล .test เพื่อให้ไฟล์โหลดโดย jest ดูโครงการเทมเพลตสำหรับตัวอย่างการทดสอบ เอกสารประกอบเรื่องตลกยังเป็นแหล่งข้อมูลที่ยอดเยี่ยม เช่นเดียวกับบทช่วยสอนการทดสอบ React Native
คุณสามารถกำหนดค่าพฤติกรรมบางอย่างของ Create React Native App ได้โดยใช้ตัวแปรสภาพแวดล้อม
เมื่อเริ่มต้นโครงการ คุณจะเห็นสิ่งนี้สำหรับ URL โครงการของคุณ:
exp://192.168.0.2:19000
"รายการ" ที่ URL นั้นจะบอกแอป Expo ถึงวิธีดึงและโหลดชุด JavaScript ของแอปของคุณ ดังนั้นแม้ว่าคุณจะโหลดในแอปผ่าน URL เช่น exp://localhost:19000 แอปไคลเอนต์ Expo จะยังคงพยายาม รับแอปของคุณตามที่อยู่ IP ที่สคริปต์เริ่มต้นให้ไว้
ในบางกรณีนี่ยังน้อยกว่าอุดมคติ นี่อาจเป็นกรณีนี้หากคุณต้องการรันโปรเจ็กต์ของคุณภายในเครื่องเสมือน และคุณต้องเข้าถึงตัวทำแพ็คเกจผ่านที่อยู่ IP อื่นที่ไม่ใช่ที่พิมพ์ตามค่าเริ่มต้น หากต้องการแทนที่ที่อยู่ IP หรือชื่อโฮสต์ที่ Create React Native App ตรวจพบ คุณสามารถระบุชื่อโฮสต์ของคุณเองผ่านตัวแปรสภาพแวดล้อม REACT_NATIVE_PACKAGER_HOSTNAME :
Mac และ Linux:
REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start
หน้าต่าง:
set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start
ตัวอย่างข้างต้นจะทำให้เซิร์ฟเวอร์การพัฒนารับฟัง exp://my-custom-ip-address-or-hostname:19000
Create React Native App ทำงานหนักมากเพื่อทำให้การตั้งค่าและพัฒนาแอปเป็นเรื่องง่ายและตรงไปตรงมา แต่ก็ยากมากที่จะทำแบบเดียวกันนี้กับ App Store ของ Apple หรือ Play Store ของ Google โดยไม่ต้องอาศัยบริการที่โฮสต์
Expo ให้บริการโฮสติ้งฟรีสำหรับแอป JS เท่านั้นที่สร้างโดย CRNA ทำให้คุณสามารถแชร์แอปของคุณผ่านแอปไคลเอนต์ Expo สิ่งนี้ต้องมีการลงทะเบียนสำหรับบัญชี Expo
ติดตั้งเครื่องมือบรรทัดคำสั่ง exp และรันคำสั่งเผยแพร่:
$ npm i -g exp
$ exp publish
คุณยังสามารถใช้บริการเช่นรุ่นสแตนด์อโลนของ Expo ได้ หากคุณต้องการรับ IPA/APK เพื่อการเผยแพร่โดยไม่ต้องสร้างโค้ดเนทีฟด้วยตัวเอง
หากคุณต้องการสร้างและปรับใช้แอปด้วยตนเอง คุณจะต้องดีดออกจาก CRNA และใช้ Xcode และ Android Studio
โดยปกติแล้วจะง่ายพอๆ กับการรัน npm run eject ในโปรเจ็กต์ของคุณ ซึ่งจะนำคุณไปสู่กระบวนการต่างๆ ตรวจสอบให้แน่ใจว่าได้ติดตั้ง react-native-cli และปฏิบัติตามคู่มือการเริ่มต้นใช้งานโค้ดเนทีฟสำหรับ React Native
หากคุณใช้ Expo API ในขณะที่ทำงานบนโปรเจ็กต์ของคุณ การเรียก API เหล่านั้นจะหยุดทำงานหากคุณดีดออกไปยังโปรเจ็กต์ React Native ปกติ หากคุณต้องการใช้ API เหล่านั้นต่อไป คุณสามารถดีดไปที่ "React Native + ExpoKit" ซึ่งจะยังคงช่วยให้คุณสร้างโค้ดเนทีฟของคุณเองและใช้ Expo API ต่อไปได้ ดูคำแนะนำในการดีดออกสำหรับรายละเอียดเพิ่มเติมเกี่ยวกับตัวเลือกนี้
หากคุณไม่สามารถโหลดแอปบนโทรศัพท์ได้เนื่องจากเครือข่ายหมดเวลาหรือการเชื่อมต่อถูกปฏิเสธ ขั้นตอนแรกที่ดีคือการตรวจสอบว่าโทรศัพท์และคอมพิวเตอร์ของคุณอยู่ในเครือข่ายเดียวกันและสามารถติดต่อกันได้ สร้าง React Native App จำเป็นต้องเข้าถึงพอร์ต 19000 และ 19001 ดังนั้นตรวจสอบให้แน่ใจว่าการตั้งค่าเครือข่ายและไฟร์วอลล์ของคุณอนุญาตให้เข้าถึงจากอุปกรณ์ของคุณไปยังคอมพิวเตอร์บนพอร์ตทั้งสองนี้
ลองเปิดเว็บเบราว์เซอร์บนโทรศัพท์ของคุณ และเปิด URL ที่สคริปต์ตัวทำแพ็กเกจพิมพ์ โดยแทนที่ exp:// ด้วย http:// ตัวอย่างเช่น หากใต้โค้ด QR ในเทอร์มินัลของคุณ คุณเห็น:
exp://192.168.0.1:19000
ลองเปิด Safari หรือ Chrome บนโทรศัพท์ของคุณแล้วโหลด
http://192.168.0.1:19000
และ
http://192.168.0.1:19001
หากวิธีนี้ได้ผล แต่คุณยังคงไม่สามารถโหลดแอปของคุณโดยการสแกนโค้ด QR ได้ โปรดเปิดปัญหาบนพื้นที่เก็บข้อมูล Create React Native App พร้อมรายละเอียดเกี่ยวกับขั้นตอนเหล่านี้และข้อความแสดงข้อผิดพลาดอื่น ๆ ที่คุณอาจได้รับ
หากคุณไม่สามารถโหลด http URL ในเว็บเบราว์เซอร์ของโทรศัพท์ได้ ให้ลองใช้คุณสมบัติการปล่อยสัญญาณ/ฮอตสปอตมือถือบนโทรศัพท์ของคุณ (แต่ระวังการใช้ข้อมูล) เชื่อมต่อคอมพิวเตอร์ของคุณกับเครือข่าย WiFi นั้น และรีสตาร์ทแพ็คเกจ หากคุณใช้ VPN คุณอาจต้องปิดการใช้งาน
หากคุณใช้ Mac มีข้อผิดพลาดบางประการที่บางครั้งผู้ใช้เห็นเมื่อพยายาม npm run ios :
มีขั้นตอนสองสามขั้นตอนที่คุณอาจต้องการดำเนินการเพื่อแก้ไขข้อผิดพลาดประเภทนี้:
Command Line Tools บางอย่าง บางครั้งเมื่อ Homebrew ติดตั้งเครื่องมือ CLI เป็นครั้งแรก ตัวเลือกนี้จะเว้นว่างไว้ ซึ่งอาจป้องกันไม่ให้ยูทิลิตี้ของ Apple ค้นหาเครื่องจำลองได้ ตรวจสอบให้แน่ใจว่าได้รัน npm/yarn run ios อีกครั้งหลังจากทำเช่นนั้นReset Contents and Settings... หลังจากนั้นเสร็จสิ้น ให้ออกจาก Simulator และรัน npm/yarn run ios อีกครั้งหากคุณไม่สามารถสแกนโค้ด QR ได้ ตรวจสอบให้แน่ใจว่ากล้องในโทรศัพท์ของคุณโฟกัสได้อย่างถูกต้อง และตรวจสอบให้แน่ใจว่าสีทั้งสองในเครื่องเทอร์มินัลของคุณมีคอนทราสต์สูงเพียงพอ ตัวอย่างเช่น ธีมเริ่มต้นของ WebStorm อาจมีคอนทราสต์ไม่เพียงพอสำหรับโค้ด QR ของเทอร์มินัลที่จะสแกนด้วยเครื่องสแกนบาร์โค้ดของระบบที่แอป Expo ใช้
หากสิ่งนี้ทำให้เกิดปัญหากับคุณ คุณอาจต้องการลองเปลี่ยนธีมสีของเทอร์มินัลให้มีคอนทราสต์มากขึ้น หรือเรียกใช้ Create React Native App จากเทอร์มินัลอื่น คุณยังสามารถป้อน URL ที่พิมพ์โดยสคริปต์ตัวทำแพ็กเกจด้วยตนเองในแถบค้นหาของแอป Expo เพื่อโหลดด้วยตนเอง
