175 lines
4.0 KiB
Markdown
175 lines
4.0 KiB
Markdown
# React Native Test Guide
|
|
|
|
## 📱 Erste Schritte zum App-Testen
|
|
|
|
### Option 1: Expo (Schnellste Methode - EMPFOHLEN für erste Tests)
|
|
|
|
Expo ist einfacher und schneller für erste Tests ohne native Builds.
|
|
|
|
```bash
|
|
# 1. Expo installieren
|
|
npm install --global expo-cli
|
|
|
|
# 2. Expo projekt initialisieren (in separatem Ordner)
|
|
npx create-expo-app fristy-test
|
|
cd fristy-test
|
|
|
|
# 3. Unsere Source-Files kopieren
|
|
# (Nur src/ Ordner kopieren)
|
|
|
|
# 4. Expo starten
|
|
npx expo start
|
|
|
|
# 5. Expo Go App auf Handy installieren
|
|
# iOS: App Store
|
|
# Android: Play Store
|
|
|
|
# 6. QR-Code scannen und App testen
|
|
```
|
|
|
|
### Option 2: React Native CLI (Für Production)
|
|
|
|
Für vollständige iOS/Android Builds.
|
|
|
|
#### Voraussetzungen:
|
|
|
|
**macOS (für iOS):**
|
|
```bash
|
|
# Xcode installieren (App Store)
|
|
# Command Line Tools
|
|
xcode-select --install
|
|
|
|
# Homebrew
|
|
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
|
|
|
|
# Node, Watchman, CocoaPods
|
|
brew install node
|
|
brew install watchman
|
|
sudo gem install cocoapods
|
|
```
|
|
|
|
**Android:**
|
|
```bash
|
|
# Android Studio herunterladen
|
|
# https://developer.android.com/studio
|
|
|
|
# Android SDK installieren
|
|
# Android Studio > Preferences > Appearance & Behavior > System Settings > Android SDK
|
|
# - Android 13 (Tiramisu) SDK installieren
|
|
# - Android SDK Build-Tools
|
|
# - Android SDK Platform-Tools
|
|
|
|
# Umgebungsvariablen setzen
|
|
export ANDROID_HOME=$HOME/Library/Android/sdk
|
|
export PATH=$PATH:$ANDROID_HOME/emulator
|
|
export PATH=$PATH:$ANDROID_HOME/platform-tools
|
|
```
|
|
|
|
#### React Native Projekt initialisieren:
|
|
|
|
```bash
|
|
# React Native CLI global installieren
|
|
npm install -g react-native-cli
|
|
|
|
# Neues Projekt mit TypeScript
|
|
npx react-native@latest init FristyApp --template react-native-template-typescript
|
|
|
|
# In Projekt-Ordner
|
|
cd FristyApp
|
|
|
|
# Unsere Source-Files kopieren
|
|
# src/ Ordner von unserem Projekt kopieren
|
|
```
|
|
|
|
### Option 3: Expo mit unserem bestehenden Code (BESTE OPTION)
|
|
|
|
Wir konvertieren unser Projekt zu Expo für schnelles Testen:
|
|
|
|
```bash
|
|
# 1. Expo Dependencies hinzufügen
|
|
npm install expo expo-status-bar
|
|
|
|
# 2. Metro Config für Expo
|
|
# (Wird automatisch erstellt)
|
|
|
|
# 3. App starten
|
|
npx expo start
|
|
|
|
# 4. Im Terminal:
|
|
# - i für iOS Simulator
|
|
# - a für Android Emulator
|
|
# - w für Web Browser
|
|
# - QR-Code für Expo Go App
|
|
```
|
|
|
|
## 🚀 Schnellstart: Expo-Setup (EMPFOHLEN)
|
|
|
|
Ich empfehle Expo für die ersten Tests, da es:
|
|
- ✅ Keine native Builds benötigt
|
|
- ✅ Sofort auf echtem Gerät testbar
|
|
- ✅ Hot Reload funktioniert perfekt
|
|
- ✅ Später zu React Native CLI migrierbar
|
|
|
|
### Schritt-für-Schritt:
|
|
|
|
1. **Expo Dependencies installieren:**
|
|
```bash
|
|
cd /Users/justinursan/Documents/Projekt/fristy/app-v0.0.1
|
|
npm install expo expo-status-bar --legacy-peer-deps
|
|
```
|
|
|
|
2. **Metro Bundler starten:**
|
|
```bash
|
|
npx expo start
|
|
```
|
|
|
|
3. **Expo Go App installieren:**
|
|
- iOS: https://apps.apple.com/app/expo-go/id982107779
|
|
- Android: https://play.google.com/store/apps/details?id=host.exp.exponent
|
|
|
|
4. **QR-Code scannen und testen!**
|
|
|
|
## 🔧 Aktuelle Einschränkungen
|
|
|
|
Unser aktuelles Setup hat noch keine nativen Projektdateien (ios/, android/).
|
|
|
|
**Du hast 2 Optionen:**
|
|
|
|
### Option A: Expo-basiert (schnell & einfach)
|
|
- Installiere Expo Dependencies
|
|
- Teste sofort mit Expo Go
|
|
- Später React Native CLI hinzufügen
|
|
|
|
### Option B: Vollständiges React Native Setup
|
|
- Native Projekte generieren
|
|
- Xcode/Android Studio konfigurieren
|
|
- Volle Kontrolle über native Code
|
|
|
|
## 📝 Empfohlene Reihenfolge
|
|
|
|
1. **Jetzt: Expo für schnelles Prototyping**
|
|
```bash
|
|
npm install expo expo-status-bar --legacy-peer-deps
|
|
npx expo start
|
|
```
|
|
|
|
2. **Später: Migration zu React Native CLI**
|
|
```bash
|
|
npx create-react-native-app --template
|
|
# Native Ordner generieren
|
|
```
|
|
|
|
3. **Production: Vollständige Builds**
|
|
- iOS: Xcode
|
|
- Android: Android Studio
|
|
|
|
## 🎯 Was ich jetzt machen soll?
|
|
|
|
Sag mir einfach:
|
|
|
|
**A)** "Expo Setup" - Ich richte Expo ein für schnelles Testen
|
|
**B)** "React Native CLI" - Ich erstelle vollständiges RN-Projekt
|
|
**C)** "Erst mal nur Code sehen" - Ich zeige dir die Struktur
|
|
|
|
Welche Option möchtest du? 😊
|