หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

นี่คือแผ่นหม้อไอน้ำแบบสร้างปฏิกิริยา-แอปด้วยการนำทาง Redux & Local Auth & React Navigation ในตัว

create-react-native-app-redux-auth สร้างไฟล์พื้นฐานทั้งหมดสำหรับแอพ React Native ใหม่ที่มี Redux เสียบ (สำหรับการจัดการสถานะ) รวมถึงการนำทางตอบสนองและการรับรองความถูกต้องในท้องถิ่นเสร็จสมบูรณ์!

คุณสามารถทำงานร่วมกับส่วนประกอบและ APIs ทั้งหมดใน React Native รวมถึง API JavaScript ส่วนใหญ่ที่แอป Expo มีให้

ยินดีต้อนรับสู่ create-react-native-app-redux-auth !

บทช่วยสอนที่เป็นลายลักษณ์อักษรสามารถพบได้ที่นี่

โครงการนี้ถูก bootstrapped ด้วย Create React Native App และ FSG

ภาพหน้าจอ

เริ่มต้น

ตรวจสอบให้แน่ใจว่าคุณติดตั้งโหนด V6 หรือติดตั้งใหม่ ๆ เช่นเดียวกับเวอร์ชันปัจจุบันของ Expo Client 2.5.0 บนอุปกรณ์มือถือของคุณเพื่อรองรับ React Native 0.55 ไม่จำเป็นต้องมีการติดตั้ง XCode หรือ Android Studio

ขั้นตอนที่ 1: การติดตั้ง 

$ npm install -g create-react-native-app-redux-auth

ขั้นตอนที่ 2: นั่งร้าน

เครื่องมือ create-react-native-app-redux-auth line สามารถใช้ในสองวิธีที่แตกต่างกัน

ตัวเลือก A: ไม่มีข้อโต้แย้ง 

$ create-react-native-app-redux-auth

เพียงเรียกใช้ create-react-native-app-redux-auth ในไดเรกทอรีสร้างโฟลเดอร์ย่อย generated ซึ่งมีไฟล์แอปพลิเคชันใหม่ของคุณ

ตัวเลือก B: อาร์กิวเมนต์เส้นทาง

อีกทางเลือกหนึ่งคือ create-react-native-app-redux-auth สามารถใช้เส้นทางไฟล์ (สัมพัทธ์หรือสัมบูรณ์และแม้แต่หนึ่งที่ยังไม่มีอยู่) และจะใช้/สร้างโฟลเดอร์ปลายทางและเติมด้วยไฟล์แอปพลิเคชันใหม่ของคุณ 

$ create-react-native-app-redux-auth path/to/any/directory/you/prefer

หากคุณได้ทำไปแล้วและ cd 'D ลงในไดเรกทอรีและต้องการเติมเต็มด้วยไฟล์แอพใหม่เพียง . เส้นทาง. 

$ create-react-native-app-redux-auth . # caution, this will put the new files in your current folder!

ขั้นตอนที่ 3: สร้าง

หลังจากที่คุณสร้างไฟล์ตรวจสอบให้แน่ใจว่าคำสั่งต่อไปนี้จะทำงานในรูทโครงการ ( generated/ เว้นแต่คุณจะใช้อาร์กิวเมนต์พา ธ ตามที่อธิบายไว้ข้างต้น): 

$ npm install

ขั้นตอนที่ 4: เริ่มต้นอย่างรวดเร็ว

เพื่อเริ่มต้นอย่างรวดเร็วเพียงแค่เปลี่ยน 2 สิ่ง :

  • ใน package.json ของคุณเปลี่ยน "ชื่อ" เป็นชื่อแอปของคุณ
  • ใน IP.js ของคุณเปลี่ยน IP เป็นที่อยู่ IP แบบเต็มของแบ็กเอนด์ไม่ว่าจะอยู่ใน localhost:PORT หรือสถานที่ที่ถูกปรับใช้เช่น Heroku

เพื่อเปิดใช้งานการรับรองความถูกต้องในท้องถิ่นในตัวโครงการที่สร้างขึ้นจะถือว่าฐานข้อมูลที่ทำงานอยู่ คุณต้องกำหนดค่าเซิร์ฟเวอร์ของคุณสำหรับการโทร Axios ของ Redux:

  • เข้าสู่ระบบจะ ทำการ ร้องขอให้ ${IP}/auth/login ด้วย payload {อีเมล: อีเมล, รหัสผ่าน: รหัสผ่าน}
  • การลงทะเบียนจะทำการร้องขอ โพสต์ เป็น ${IP}/auth/signup ด้วย payload {อีเมล: อีเมล, รหัสผ่าน: รหัสผ่าน}
  • DELETE จะทำการขอ ลบ เป็น ${IP}/auth/logout โดยไม่มีการโหลด 
$ npm start

ขอบคุณที่เล่น! Hadoken. -

สร้างเอกสารเฉพาะแอป

ด้านล่างคุณจะพบข้อมูลเกี่ยวกับการทำงานร่วมกัน คู่มือฉบับล่าสุดนี้มีอยู่ที่นี่

สารบัญ

  • อัปเดตเป็นรุ่นใหม่
  • สคริปต์ที่มีอยู่
    • NPM เริ่มต้น
    • การทดสอบ NPM
    • NPM เรียกใช้ iOS
    • NPM เรียกใช้ Android
    • NPM Run Eject
  • การเขียนและการทดสอบ
  • ตัวแปรสภาพแวดล้อม
    • การกำหนดค่าที่อยู่ IP Packager
  • ปรับแต่งชื่อการแสดงแอพและไอคอน
  • การแบ่งปันและการปรับใช้
    • การเผยแพร่ไปยังชุมชนพื้นเมือง React ของ Expo
    • การสร้างแอป "แบบสแตนด์อโลน" งานแสดงสินค้า
    • ออกจากแอพสร้าง React Native
      • สร้างการพึ่งพา (Xcode & Android Studio)
      • ฉันควรใช้ Expokit หรือไม่?
  • การแก้ไขปัญหา
    • การสร้างเครือข่าย
    • iOS Simulator จะไม่เปิด
    • รหัส QR ไม่ได้สแกน

อัปเดตเป็นรุ่นใหม่

คุณควรอัพเดทการติดตั้งทั่วโลกของ create-react-native-app ไม่ค่อยดี

การอัปเดตการพึ่งพา react-native-scripts ของแอปของคุณควรจะง่ายพอ ๆ กับการชนหมายเลขเวอร์ชันใน package.json และติดตั้งการพึ่งพาโครงการของคุณใหม่

การอัปเกรดเป็น React Native เวอร์ชันใหม่นั้นจำเป็นต้องมีการอัปเดตเวอร์ชัน react-native , react และ expo และการตั้งค่า sdkVersion ที่ถูกต้องใน app.json ดูคู่มือการใช้เวอร์ชันสำหรับข้อมูลที่ทันสมัยเกี่ยวกับความเข้ากันได้ของเวอร์ชันแพ็คเกจ

สคริปต์ที่มีอยู่

หากมีการติดตั้งเส้นด้ายเมื่อโครงการเริ่มต้นการพึ่งพาจะได้รับการติดตั้งผ่านเส้นด้ายและคุณควรใช้มันเพื่อเรียกใช้คำสั่งเหล่านี้เช่นกัน ซึ่งแตกต่างจากการติดตั้งการพึ่งพาคำสั่งการรันไวยากรณ์เหมือนกันสำหรับเส้นด้ายและ NPM ในเวลาที่เขียนนี้

npm start

รันแอพของคุณในโหมดการพัฒนา

เปิดในแอพ Expo บนโทรศัพท์ของคุณเพื่อดู มันจะโหลดซ้ำหากคุณบันทึกการแก้ไขไปยังไฟล์ของคุณและคุณจะเห็นการสร้างข้อผิดพลาดและบันทึกในเทอร์มินัล

บางครั้งคุณอาจต้องรีเซ็ตหรือล้างแคชของ React Native Packager ในการทำเช่นนั้นคุณสามารถส่งธง --reset-cache ไปยังสคริปต์เริ่มต้น: 

 npm start --reset-cache
# or
yarn start --reset-cache

npm test

รันนักวิ่งทดสอบ jest ในการทดสอบของคุณ

npm run ios

เช่นเดียวกับ npm start แต่ยังพยายามเปิดแอปของคุณในเครื่องจำลอง iOS หากคุณใช้ Mac และติดตั้งไว้

npm run android

เช่นเดียวกับ npm start แต่ยังพยายามเปิดแอปของคุณบนอุปกรณ์ Android หรือ Emulator ที่เชื่อมต่อ ต้องมีการติดตั้งเครื่องมือสร้าง Android (ดู React Native Docs สำหรับการตั้งค่าโดยละเอียด) นอกจากนี้เรายังแนะนำให้ติดตั้ง genymotion เป็นตัวจำลอง Android ของคุณ เมื่อคุณตั้งค่าสภาพแวดล้อมการสร้างแบบดั้งเดิมเสร็จแล้วมีสองตัวเลือกสำหรับการทำสำเนา adb ที่เหมาะสมเพื่อสร้างแอพ React Native:

ใช้ adb ของ Android Studio
  1. ตรวจสอบให้แน่ใจว่าคุณสามารถเรียกใช้ ADB จากเทอร์มินัลของคุณ
  2. เปิด genymotion และนำทางไปยัง Settings -> ADB เลือก“ ใช้เครื่องมือ Android SDK ที่กำหนดเอง” และอัปเดตด้วยไดเรกทอรี Android SDK ของคุณ
ใช้ adb ของ GenyMotion
  1. ค้นหาสำเนา ADB ของ Genymotion ตัวอย่างเช่น MacOS นี่เป็นปกติ /Applications/Genymotion.app/Contents/MacOS/tools/ พลิเคชัน/genymotion.app/contents/macos/tools/
  2. เพิ่มไดเรกทอรีเครื่องมือ Genymotion ไปยังเส้นทางของคุณ (คำแนะนำสำหรับ Mac, Linux และ Windows)
  3. ตรวจสอบให้แน่ใจว่าคุณสามารถเรียกใช้ ADB จากเทอร์มินัลของคุณ

npm run eject

สิ่งนี้จะเริ่มต้นกระบวนการของ "การรีด" จากการสร้างสคริปต์การสร้างแอปของ React Native คุณจะถูกถามคำถามสองสามข้อเกี่ยวกับวิธีที่คุณต้องการสร้างโครงการของคุณ

คำเตือน: การรันดีดออกเป็นการกระทำที่ถาวร (นอกเหนือจากระบบควบคุมเวอร์ชันใดก็ตามที่คุณใช้) แอพที่ถูกขับออกมาจะทำให้คุณต้องติดตั้ง XCode และ/หรือ Android Studio Environment

ปรับแต่งชื่อการแสดงแอพและไอคอน

คุณสามารถแก้ไข app.json เพื่อรวมปุ่มกำหนดค่าภายใต้ปุ่ม expo

หากต้องการเปลี่ยนชื่อที่แสดงแอปของคุณตั้งค่าคีย์ expo.name ใน app.json เป็นสตริงที่เหมาะสม

หากต้องการตั้งค่าไอคอนแอพให้ตั้งค่าคีย์ expo.icon ใน app.json ให้เป็นเส้นทางท้องถิ่นหรือ URL ขอแนะนำให้คุณใช้ไฟล์ 512x512 PNG ที่มีความโปร่งใส

การเขียนและการทดสอบ

โครงการนี้ถูกตั้งค่าให้ใช้ jest สำหรับการทดสอบ คุณสามารถกำหนดค่ากลยุทธ์การทดสอบที่คุณต้องการได้ แต่ Jest ทำงานนอกกรอบ สร้างไฟล์ทดสอบในไดเรกทอรีที่เรียกว่า __tests__ หรือด้วยส่วนขยาย .test เพื่อให้ไฟล์โหลดโดย JEST ดูโครงการเทมเพลตสำหรับการทดสอบตัวอย่าง เอกสารที่ตลกขบขันยังเป็นทรัพยากรที่ยอดเยี่ยมเช่นเดียวกับการสอนการทดสอบพื้นเมือง React

ตัวแปรสภาพแวดล้อม

คุณสามารถกำหนดค่าบางส่วนของการสร้างพฤติกรรมของแอป Native React โดยใช้ตัวแปรสภาพแวดล้อม

การกำหนดค่าที่อยู่ IP Packager

เมื่อเริ่มโครงการของคุณคุณจะเห็นสิ่งนี้สำหรับ URL โครงการของคุณ: 

 exp://192.168.0.2:19000

"รายการ" ที่ URL นั้นจะบอกแอป Expo ถึงวิธีการดึงและโหลดชุด JavaScript ของแอปของคุณได้อย่างไรดังนั้นแม้ว่าคุณจะโหลดในแอพผ่าน URL เช่น exp://localhost:19000 แอป Expo Client จะยังคงพยายามดึงแอปของคุณตามที่อยู่ IP

ในบางกรณีสิ่งนี้น้อยกว่าอุดมคติ นี่อาจเป็นกรณีนี้หากคุณต้องการเรียกใช้โครงการของคุณภายในเครื่องเสมือนและคุณต้องเข้าถึง packager ผ่านที่อยู่ IP ที่แตกต่างจากที่พิมพ์ตามค่าเริ่มต้น เพื่อที่จะแทนที่ที่อยู่ IP หรือชื่อโฮสต์ที่ตรวจพบโดยสร้างแอป Native React คุณสามารถระบุชื่อโฮสต์ของคุณเองผ่านตัวแปรสภาพแวดล้อม REACT_NATIVE_PACKAGER_HOSTNAME :

Mac และ Linux: 

 REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start

Windows: 

 set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start

ตัวอย่างข้างต้นจะทำให้เซิร์ฟเวอร์การพัฒนาฟังบน exp://my-custom-ip-address-or-hostname:19000

การแบ่งปันและการปรับใช้

สร้างแอพ React Native ทำงานได้มากมายในการตั้งค่าแอพและการพัฒนาที่เรียบง่ายและตรงไปตรงมา แต่มันก็ยากมากที่จะทำเช่นเดียวกันสำหรับการปรับใช้กับ Apple Store ของ Apple หรือ Play Store ของ Google โดยไม่ต้องพึ่งพาบริการโฮสต์

การเผยแพร่ไปยังชุมชนพื้นเมือง React ของ Expo

Expo ให้บริการโฮสต์ฟรีสำหรับแอพ JS-only ที่สร้างโดย CRNA ช่วยให้คุณสามารถแชร์แอปของคุณผ่านแอพ Expo Client สิ่งนี้ต้องมีการลงทะเบียนสำหรับบัญชี Expo

ติดตั้งเครื่องมือบรรทัดคำสั่ง exp และเรียกใช้คำสั่ง publish: 

 $ npm i -g exp
$ exp publish

การสร้างแอป "แบบสแตนด์อโลน" งานแสดงสินค้า

นอกจากนี้คุณยังสามารถใช้บริการเช่นการสร้างแบบสแตนด์อโลนของ Expo หากคุณต้องการรับ IPA/APK สำหรับการแจกจ่ายโดยไม่ต้องสร้างรหัสดั้งเดิมด้วยตัวคุณเอง

ออกจากแอพสร้าง React Native

หากคุณต้องการสร้างและปรับใช้แอพด้วยตัวคุณเองคุณจะต้องออกจาก CRNA และใช้ XCode และ Android Studio

โดยปกติแล้วจะง่ายพอ ๆ กับการรัน npm run eject ในโครงการของคุณซึ่งจะนำคุณผ่านกระบวนการ ตรวจสอบให้แน่ใจว่าได้ติดตั้ง react-native-cli และทำตามคู่มือเริ่มต้นใช้งานรหัสดั้งเดิมสำหรับ React Native

ฉันควรใช้ Expokit หรือไม่?

หากคุณใช้ประโยชน์จาก Expo APIs ในขณะที่ทำงานในโครงการของคุณการโทร API เหล่านั้นจะหยุดทำงานหากคุณขับออกไปยังโครงการ React Native ปกติ หากคุณต้องการใช้ API เหล่านั้นต่อไปคุณสามารถนำออกไปที่ "React Native + Expokit" ซึ่งจะช่วยให้คุณสร้างรหัสดั้งเดิมของคุณเองและใช้งาน Expo API ต่อไป ดูคู่มือการออกสำหรับรายละเอียดเพิ่มเติมเกี่ยวกับตัวเลือกนี้

การแก้ไขปัญหา

การสร้างเครือข่าย

หากคุณไม่สามารถโหลดแอปของคุณบนโทรศัพท์ของคุณได้เนื่องจากการหมดเวลาเครือข่ายหรือการเชื่อมต่อที่ถูกปฏิเสธขั้นตอนแรกที่ดีคือการตรวจสอบว่าโทรศัพท์และคอมพิวเตอร์ของคุณอยู่ในเครือข่ายเดียวกันและสามารถเข้าถึงกันและกันได้ สร้างแอป Native React ต้องการการเข้าถึงพอร์ต 19000 และ 19001 เพื่อให้แน่ใจว่าการตั้งค่าเครือข่ายและไฟร์วอลล์ของคุณอนุญาตให้เข้าถึงจากอุปกรณ์ของคุณไปยังคอมพิวเตอร์ของคุณบนพอร์ตทั้งสองนี้

ลองเปิดเว็บเบราว์เซอร์บนโทรศัพท์ของคุณและเปิด URL ที่สคริปต์ Packager พิมพ์แทนที่ exp:// ด้วย http:// ตัวอย่างเช่นหากอยู่ใต้รหัส QR ในเทอร์มินัลของคุณคุณจะเห็น: 

 exp://192.168.0.1:19000

ลองเปิด Safari หรือ Chrome บนโทรศัพท์ของคุณและโหลด 

 http://192.168.0.1:19000

และ 

 http://192.168.0.1:19001

หากใช้งานได้ แต่คุณยังไม่สามารถโหลดแอปของคุณได้โดยการสแกนรหัส QR โปรดเปิดปัญหาเกี่ยวกับที่เก็บแอพสร้างปฏิกิริยา Native แอพพร้อมรายละเอียดเกี่ยวกับขั้นตอนเหล่านี้และข้อความแสดงข้อผิดพลาดอื่น ๆ ที่คุณอาจได้รับ

หากคุณไม่สามารถโหลด URL http ในเว็บเบราว์เซอร์ของโทรศัพท์ของคุณลองใช้ฟีเจอร์ฮอตสปอต Tethering/Mobile บนโทรศัพท์ของคุณ (ระวังการใช้ข้อมูล) เชื่อมต่อคอมพิวเตอร์ของคุณกับเครือข่าย WiFi นั้น หากคุณใช้ VPN คุณอาจต้องปิดการใช้งาน

iOS Simulator จะไม่เปิด

หากคุณอยู่ใน Mac มีข้อผิดพลาดเล็กน้อยที่บางครั้งผู้ใช้จะเห็นเมื่อพยายามใช้ npm run ios :

  • "รหัสออกที่ไม่ใช่ศูนย์: 107"
  • "คุณอาจต้องติดตั้ง xcode" แต่มีการติดตั้งแล้ว
  • และอื่น ๆ

มีบางขั้นตอนที่คุณอาจต้องการแก้ไขปัญหาข้อผิดพลาดเหล่านี้:

  1. ตรวจสอบให้แน่ใจว่ามีการติดตั้ง Xcode และเปิดเพื่อรับข้อตกลงใบอนุญาตหากแจ้งให้คุณทราบ คุณสามารถติดตั้งได้จาก Mac App Store
  2. เปิดการตั้งค่าของ Xcode แท็บตำแหน่งและตรวจสอบให้แน่ใจว่าตัวเลือกเมนู Command Line Tools ถูกตั้งค่าเป็นบางสิ่ง บางครั้งเมื่อ Homebrew ติดตั้งเครื่องมือ CLI เป็นครั้งแรกตัวเลือกนี้จะว่างเปล่าซึ่งสามารถป้องกันไม่ให้ยูทิลิตี้ของ Apple ค้นหาเครื่องจำลอง ตรวจสอบให้แน่ใจว่าได้เรียกใช้ npm/yarn run ios อีกครั้งหลังจากทำเช่นนั้น
  3. หากไม่ได้ผลให้เปิดตัวจำลองและภายใต้เมนูแอพเลือกให้เลือก Reset Contents and Settings... หลังจากนั้นเสร็จสิ้นให้ออกจากตัวจำลองและเรียกใช้ npm/yarn run ios อีกครั้ง

รหัส QR ไม่ได้สแกน

หากคุณไม่สามารถสแกนรหัส QR ตรวจสอบให้แน่ใจว่ากล้องของโทรศัพท์ของคุณโฟกัสถูกต้องและตรวจสอบให้แน่ใจว่าความคมชัดของสองสีในเทอร์มินัลของคุณสูงพอ ตัวอย่างเช่นธีมเริ่มต้นของ WebStorm อาจมีความคมชัดไม่เพียงพอสำหรับรหัสเทอร์มินัล QR ที่สามารถสแกนได้ด้วยเครื่องสแกนบาร์โค้ดระบบที่แอป Expo ใช้

หากสิ่งนี้ทำให้เกิดปัญหากับคุณคุณอาจต้องการลองเปลี่ยนธีมสีของเทอร์มินัลของคุณเพื่อให้มีความคมชัดมากขึ้นหรือเรียกใช้แอพสร้างปฏิกิริยาพื้นเมืองจากเทอร์มินัลอื่น นอกจากนี้คุณยังสามารถป้อน URL ที่พิมพ์โดยสคริปต์ Packager ด้วยตนเองในแถบค้นหาของแอป Expo เพื่อโหลดด้วยตนเอง

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด