Română

English

Română

English

Aspect

React Native (TypeScript) ​

Ar trebui să creezi o componentă funcțională numită App ca punct principal de intrare al aplicației tale, folosind primitive React Native (View, Text, StyleSheet, Pressable etc.) importate din react-native. Tipurile provin din @types/react-native. Același cod sursă se compilează neschimbat pentru iOS/Android prin Expo sau RN CLI.

Intern, șablonul folosește react-native-web, care livrează implementările web ale primitivelor RN. Un alias Vite ('react-native' → react-native-web) se ocupă de înlocuire în timpul compilării/testării, astfel încât importurile tale să rămână identice cu cele dintr-un proiect mobil real.

Fișierul de intrare ​

Fișierul de intrare pentru acest șablon trebuie să fie unul dintre următoarele: index.tsx sau App.tsx. Primul identificat este utilizat ca punct de intrare. index.tsx ar trebui să înregistreze aplicația prin intermediul AppRegistry (convenție RN; pe web se montează pe document.getElementById('root')).

Versiune ​

Rulează React Native Web v0.19 cu React 18, Vitest v3.2 și TypeScript v5.3 pe Node.js v20.

Limbi suportate ​

TypeScript

Framework de testare ​

Vitest cu @testing-library/react

Recomandări speciale și detalii de implementare ​

  • Fișierele sursă trebuie să importe primitivele RN din 'react-native' (NU din 'react-native-web') — aliasul Vite rezolvă înlocuirea în timpul compilării/testării. Acest lucru menține codul sursă portabil pe iOS/Android.
  • Tipizează obiectele de stil cu ViewStyle, TextStyle, ImageStyle din react-native pentru o siguranță completă a tipurilor: StyleSheet.create<{ container: ViewStyle; text: TextStyle }>(...).
  • RN web randează View ca un <div>, Text ca un <div> cu dir="auto", iar Pressable ca un <div> cu role/tabindex, astfel încât interogările după rol și text (getByText, getByRole) funcționează normal în raport cu jsdom.
  • Pentru evenimentele de apăsare în teste, folosește fireEvent.click(...) — RN web mapează onPress la evenimentele web click. Nu folosi fireEvent.press.

Exemplu cu @testing-library/react: ​

tsx
import { render, screen } from '@testing-library/react';
import App from './App';

describe('App', () => {
  test("renders 'Hello, World!'", () => {
    render(<App />);
    expect(screen.getByText('Hello, World!')).toBeInTheDocument();
  });
});

Un App.tsx tipic:

tsx
import { View, Text, StyleSheet, type ViewStyle, type TextStyle } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
}

const styles = StyleSheet.create<{ container: ViewStyle; text: TextStyle }>({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
  text: { fontSize: 24, fontWeight: '600' }
});

Biblioteci incluse ​

Cum se depanează ​

React Native Web mapează primitivele RN la elemente HTML web, astfel încât depanarea este identică cu standardul React DOM — console.log din interiorul componentelor afișează în consola browserului.

Pași pentru depanare folosind loguri în consolă ​

  1. Identifică zona cu probleme: Identifică exact componenta sau funcția în care suspectezi că există problema.
  2. Introdu instrucțiuni console.log(): Înregistrează strategic valorile variabilelor și fluxul de execuție înainte/după codul suspect.
  3. Verifică rezultatul testelor tale (Results Output).
  4. Folosește pictograma de depanare din zona de previzualizare (Preview): Fă clic pe pictograma de depanare din zona Preview pentru a verifica datele de ieșire din consolă sau deschide direct consola devtools a browserului.
  5. Analizează rezultatul: Examinează logurile afișate pentru a înțelege execuția aplicației și a identifica eventualele probleme.

Exemplu de utilizare a console.log() pentru depanare:

tsx
import { useState } from 'react';
import { View, Text, Pressable } from 'react-native';

export default function Counter() {
  const [count, setCount] = useState<number>(0);

  const handlePress = (): void => {
    console.log('pressed', count); // Log press event
    setCount((previous) => previous + 1);
  };

  console.log('Current count:', count);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Pressable onPress={handlePress}>
        <Text>Increment</Text>
      </Pressable>
    </View>
  );
}