spotthestation

ยินดีต้อนรับสู่ STSAPP

โครงการนี้ถูก bootstraped โดยใช้ Ignite CLI V8.4.2 (React Native V0.69.7)

ปัจจุบันรวมถึง:

• ตอบสนองพื้นเมือง
• นำทางการนำทาง
• ต้นไม้รัฐ MOBX
• ตัวพิมพ์ใหญ่
• และอีกมากมาย

เริ่มต้น

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

ก่อนที่คุณจะเรียกใช้โครงการนี้คุณจะต้องติดตั้งซอฟต์แวร์ต่อไปนี้บนเครื่องของคุณ:

• node.js (v16.x หรือสูงกว่า)
• เส้นด้าย (v1.x)
• ตอบสนอง CLI พื้นเมือง

การติดตั้ง

1. คัดลอกไฟล์ env ตัวอย่างไปยังไดเรกทอรี config:

    cp .env.example scripts/config/.env.staging
   

2. ในไฟล์ scripts/config/.env.staging ให้ค่าสำหรับตัวแปรต่อไปนี้:
   • API_URL - URL ของแบ็กเอนด์ของคุณตัวอย่างเช่น: http: // localhost: 5000/
   • GOOGLE_API_TOKEN - โทเค็น Google Maps API ของคุณ เรียนรู้วิธีรับที่นี่
   • MAPBOX_API_TOKEN - โทเค็น MAPBOX ของคุณ เรียนรู้วิธีรับที่นี่
   • คุณสามารถปล่อยให้ตัวแปรอื่นไม่เปลี่ยนแปลง
3. เรียกใช้สคริปต์ config-env.sh

    ./scripts/config-env.sh staging
   

4. สร้างไฟล์ .netrc ในโฮมไดเร็กตอรี่ของคุณ (ไม่ใช่ไดเรกทอรีโครงการ) ด้วยเนื้อหาต่อไปนี้:

    machine api.mapbox.com
   login mapbox
   password YOUR_SECRET_MAPBOX_ACCESS_TOKEN
   

   แทนที่ YOUR_SECRET_MAPBOX_ACCESS_TOKEN ด้วยโทเค็น Mapbox ของคุณ
5. เปลี่ยนสิทธิ์ไฟล์ .netrc

    sudo chmod 0600 ~/.netrc
   

6. สร้างไฟล์ .gradle/gradle.properties ในไดเรกทอรีโฮมไดเรกทอรีของคุณ (ไม่ใช่ไดเรกทอรีโครงการ) ด้วยเนื้อหาต่อไปนี้:

    MAPBOX_DOWNLOADS_TOKEN=YOUR_SECRET_MAPBOX_ACCESS_TOKEN
   

   แทนที่ YOUR_SECRET_MAPBOX_ACCESS_TOKEN ด้วยโทเค็น Mapbox ของคุณ
7. เรียกใช้ npx @sentry/wizard@latest -s -i reactNative เพื่อตั้งค่า Sentry อย่าลังเลที่จะปฏิเสธการอัปเดตและ/หรือการติดตั้งฝัก
8. ติดตั้งการพึ่งพาโครงการ:

    yarn install
   

ทำงานบนอุปกรณ์ iOS

1. เปิด ios/STSApp.xcworkspace ใน XCODE
2. ไปที่แท็บ Signing & Capabilities
3. ติ๊ก Automatically manage signing
4. เลือกทีมพัฒนา หมายเหตุ: เนื่องจากโครงการนี้ใช้การแจ้งเตือนแบบพุชทีมพัฒนาส่วนบุคคลจะไม่ทำงาน
5. เปลี่ยนตัวระบุชุดเป็นค่าใด ๆ
6. คลิกไอคอนเริ่มต้นเพื่อสร้างและเรียกใช้แอพบนอุปกรณ์ของคุณ

ทำงานบนอุปกรณ์ Android

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

 yarn android

หากการสร้างประสบความสำเร็จคุณอาจต้องเปิดแอพด้วยตนเองบนอุปกรณ์ของคุณ

โครงสร้างโครงการ

โครงสร้างโครงการ Ignite Boilerplate จะมีลักษณะคล้ายกับสิ่งนี้:

 ignite-project
├── app
│   ├── components
│   ├── config
│   ├── i18n
│   ├── models
│   ├── navigators
│   ├── screens
│   ├── services
│   ├── theme
│   ├── utils
│   ├── app.tsx
├── test
│   ├── __snapshots__
│   ├── mockFile.ts
│   ├── setup.ts
├── README.md
├── android
│   ├── app
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── keystores
│   └── settings.gradle
├── index.js
├── ios
│   ├── IgniteProject
│   ├── IgniteProject-tvOS
│   ├── IgniteProject-tvOSTests
│   ├── IgniteProject.xcodeproj
│   └── IgniteProjectTests
├── .env
└── package.json

./App Directory

รวมอยู่ในโครงการ Ignite Boilerplate คือไดเรกทอรี app นี่คือไดเรกทอรีที่คุณจะต้องสร้างโดยปกติเมื่อใช้วานิลลาปฏิกิริยาดั้งเดิม

ด้านในของไดเรกทอรี app มีลักษณะคล้ายกับต่อไปนี้:

 app
├── components
├── config
├── i18n
├── models
├── navigators
├── screens
├── services
├── theme
├── utils
├── app.tsx

ส่วนประกอบ นี่คือที่ส่วนประกอบที่นำกลับมาใช้ใหม่ของคุณจะมีชีวิตอยู่ซึ่งช่วยให้คุณสร้างหน้าจอของคุณ

i18n นี่คือที่ที่การแปลของคุณจะมีชีวิตอยู่หากคุณใช้ react-native-i18n

แบบจำลอง นี่คือที่ที่นางแบบแอปของคุณจะมีชีวิตอยู่ แต่ละรุ่นมีไดเรกทอรีที่จะมีไฟล์รุ่น mobx-state-tree , ไฟล์ทดสอบและไฟล์สนับสนุนอื่น ๆ เช่นการกระทำประเภท ฯลฯ

Navigators นี่คือที่ที่ react-navigation ของคุณจะมีชีวิตอยู่

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

บริการ ใด ๆ บริการที่เชื่อมต่อกับโลกภายนอกจะอยู่ที่นี่ (คิดว่า REST API, การแจ้งเตือนแบบพุช ฯลฯ )

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

Utils นี่เป็นสถานที่ที่ดีในการวางผู้ช่วยเบ็ดเตล็ดและสาธารณูปโภค สิ่งต่าง ๆ เช่นผู้ช่วยวันที่ฟอร์แมต ฯลฯ มักพบที่นี่ อย่างไรก็ตามควรใช้สำหรับสิ่งต่าง ๆ ที่แชร์อย่างแท้จริงในแอปพลิเคชันของคุณ หากผู้ช่วยหรือยูทิลิตี้ถูกใช้โดยส่วนประกอบหรือโมเดลเฉพาะให้พิจารณาการรวบรวมผู้ช่วยของคุณด้วยส่วนประกอบหรือรุ่นนั้น

app.tsx นี่คือจุดเข้าสู่แอพของคุณ นี่คือที่ที่คุณจะพบองค์ประกอบแอพหลักที่แสดงผลส่วนที่เหลือของแอปพลิเคชัน

./test Directory

ไดเรกทอรีนี้จะถือการกำหนดค่าและการล้อเลียนของคุณ

จะรับโทเค็น Mapbox ได้อย่างไร?

1. สร้างบัญชี MAPBOX ที่นี่
2. ไปที่หน้า Tokens Access
3. คลิก Create a token
4. ตั้งชื่อโทเค็นของคุณทำเครื่องหมายในช่องทำเครื่องหมายขอบเขตสาธารณะทั้งหมดทำเครื่องหมายในช่องทำเครื่องหมายความลับต่อไปนี้:
   • สไตล์: ดาวน์โหลด
   • ดาวน์โหลด: อ่าน
   • วิสัยทัศน์: ดาวน์โหลด
   • การนำทาง: ดาวน์โหลด
5. คลิก Create token และคัดลอกโทเค็นของคุณ ควรเริ่มต้นด้วย sk.