react native template

---

ตอบสนองเทมเพลตพื้นเมือง

โครงการนี้เป็นเทมเพลตพื้นเมือง React ที่ออกแบบมาเพื่อเร่งการพัฒนาโดยการจัดหาคุณสมบัติที่สำคัญเช่นการจัดการของรัฐความเป็นสากลการดึงข้อมูลการนำทางและส่วนประกอบที่ใช้ซ้ำได้

ภาพหน้าจอ

สร้างขึ้นโดยใช้ส่วนประกอบเริ่มต้นที่มีให้ในโครงการ

หน้าจอต้อนรับ

หน้าจอเข้าสู่ระบบ

ลงทะเบียนหน้าจอ

หน้าจอโปรไฟล์

คุณสมบัติ

• - ความเป็นสากล (I18N)

  • การสนับสนุนหลายภาษาโดยใช้ react-i18next สำหรับการแปลที่ไร้รอยต่อ

• ️การจัดการของรัฐด้วย redux

  • การจัดการสถานะส่วนกลางสำหรับการเข้าถึงและอัปเดตสถานะทั่วโลกที่มีประสิทธิภาพ

• - การดึงข้อมูลด้วย Query React

  • การดึงข้อมูลที่ได้รับการปรับปรุงการแคชและการซิงโครไนซ์

• - การนำทาง

  • การนำทางที่ราบรื่นและใช้งานง่ายโดยใช้ react-navigation ด้วยส่วนประกอบพื้นฐานเช่น VStack และ HStack

• ⚛สถาปัตยกรรมที่ใช้ส่วนประกอบ

  • การออกแบบแบบแยกส่วนด้วยส่วนประกอบ UI ที่นำกลับมาใช้ใหม่ได้และสไตล์ที่สอดคล้องกัน

• - สาธารณูปโภคทั่วไป

  • ฟังก์ชั่นผู้ช่วยและยูทิลิตี้สำหรับการพัฒนาที่คล่องตัว

• - Axios Management

  • คำขอ API ที่กำหนดค่าได้โดยใช้ Axios พร้อมการจัดการข้อผิดพลาดในตัวและการจัดการการตอบสนอง

• การจัดการ WebSocket

  • การสนับสนุนการสื่อสารแบบเรียลไทม์โดยใช้ WebSockets

• - การจัดการคุกกี้

  • การจัดการคุกกี้ที่ง่ายขึ้นสำหรับการรับรองความถูกต้องและเซสชันผู้ใช้

• การรับรองความถูกต้อง

  • การรับรองความถูกต้องของผู้ใช้และการลงทะเบียนด้วยการจัดการโทเค็นที่ปลอดภัย

ส่วนประกอบ

โครงการรวมชุดของส่วนประกอบที่นำกลับมาใช้ใหม่ได้สำหรับการสร้างส่วนต่อประสานผู้ใช้:

• ส่วนประกอบปุ่ม

  • button.tsx : ส่วนประกอบปุ่มมาตรฐานพร้อมสไตล์ที่ปรับแต่งได้

• ส่วนประกอบการพิมพ์

  • h1.tsx , h2.tsx : ส่วนประกอบส่วนหัวสำหรับการพิมพ์ที่สอดคล้องกัน
  • text.tsx : ส่วนประกอบข้อความที่ปรับแต่งได้สำหรับการแสดงเนื้อหา

• ส่วนประกอบอินพุต

  • input.tsx : ส่วนประกอบฟิลด์อินพุตพื้นฐาน
  • input-with-icon.tsx : ฟิลด์อินพุตพร้อมไอคอนสำหรับการโต้ตอบของผู้ใช้ที่ปรับปรุงแล้ว

• ส่วนประกอบเลย์เอาต์

  • vstack.tsx : เค้าโครงสแต็กแนวตั้งสำหรับการจัดเรียงองค์ประกอบในแนวตั้ง
  • hstack.tsx : เค้าโครงสแต็กแนวนอนสำหรับการจัดเรียงองค์ประกอบในแนวนอน
  • spacer.tsx : ส่วนประกอบ spacer สำหรับการเพิ่มพื้นที่ที่ยืดหยุ่นระหว่างองค์ประกอบ

• ส่วนประกอบการนำทาง

  • navbar.tsx : แถบการนำทางที่ปรับแต่งได้สำหรับส่วนหัวแอพ

• ส่วนประกอบภาพ

  • image.tsx : ส่วนประกอบรูปภาพสำหรับการแสดงภาพด้วยการรองรับแคช

• ส่วนประกอบยูทิลิตี้

  • separator.tsx : ส่วนประกอบตัวแบ่งสำหรับการแยกเนื้อหา
  • separator-with-text.tsx : Divider พร้อมข้อความสำหรับ UI ที่ปรับปรุงแล้ว
  • switch.tsx : สลับส่วนประกอบสวิตช์สำหรับอินพุตบูลีน

• ไฟล์ดัชนี

  • index.ts : ไฟล์ส่งออกกลางสำหรับส่วนประกอบ

เริ่มต้น

ข้อกำหนดเบื้องต้น

ตรวจสอบให้แน่ใจว่าคุณติดตั้งดังต่อไปนี้:

• node.js (v14 หรือสูงกว่า)
• เส้นด้าย
• Android Studio / Xcode สำหรับการพัฒนา Android / iOS

การติดตั้ง

1. โคลนที่เก็บ:

   git clone [email protected]:ToniDarodda/react-native-template.git
   cd ReactNativeTemplate

2. ติดตั้งการพึ่งพา:

   yarn install

3. กำหนดค่าตัวแปรสภาพแวดล้อม:

   อัปเดตไฟล์ .env ในไดเรกทอรีรูทด้วยการตั้งค่าการกำหนดค่าของคุณ:

   API_URL= ' https://your-api-url.com '
   SOCKET_URL= ' https://your-socket-url.com '

การรันแอปพลิเคชัน

1. เริ่มต้น Metro Bundler:

   yarn start

2. เรียกใช้แอปพลิเคชันบน Android:

   yarn android

3. เรียกใช้แอปพลิเคชันบน iOS:

   yarn ios

4. เข้าถึงแอปพลิเคชัน:

   แอพจะพร้อมใช้งานบนเครื่องจำลองหรืออุปกรณ์ของคุณ

- การทดสอบ

ในการเรียกใช้การทดสอบให้ใช้คำสั่งต่อไปนี้:

yarn test 

สคริปต์

• - รหัสรูปแบบโดยใช้ yarn format
• ? ‍♂ เริ่มแอปพลิเคชัน: yarn start
• ? ‍ เริ่มต้นในโหมดการพัฒนา: yarn android หรือ yarn ios
• - ผ้าสำลีรหัสโดยใช้ ESLINT: yarn lint
• - เรียกใช้การทดสอบ: yarn test
• เรียกใช้การทดสอบแบบ end-to-end: yarn test:e2e

ใบอนุญาต

ไม่มีใบอนุญาต คุณมีอิสระที่จะใช้มัน

- ผู้เขียน

Toni da Rodda

ไอคอน

• การปรับใช้
• การกำหนดค่า
• - เอกสาร
• - การซ่อมบำรุง
• ความปลอดภัย
• - การรวมอีเมล
• - การเพิ่มประสิทธิภาพประสิทธิภาพ
• ⚡ได้รับเวลา

---

อย่าลังเลที่จะมีส่วนร่วมในโครงการนี้โดยการส่งปัญหาหรือดึงคำขอ

สำหรับคำถามหรือการสนับสนุนใด ๆ โปรดติดต่อ Toni da Rodda

---