Română

English

Română

English

Aspect

React Native ​

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

În interior, ș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 la momentul build-ului/testării, astfel încât importurile tale rămân identice cu cele dintr-un proiect mobil real.

Fișier de intrare ​

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

Versiune ​

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

Limbi suportate ​

Javascript

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 'react-native-web') — aliasul Vite rezolvă înlocuirea în timpul build-ului/testării. Acest lucru menține codul sursă portabil pe iOS/Android.
  • RN web randează View ca un <div>, Text ca un <div> cu dir="auto", și Pressable ca un <div> cu role/tabindex, astfel încât interogările de rol și text (getByText, getByRole) funcționează normal în jsdom.
  • Pentru evenimentele de apăsare în teste, folosește fireEvent.click(...) — RN web mapează onPress la evenimente web click. Nu folosi fireEvent.press.
  • Stilizează cu StyleSheet.create({...}) în loc de CSS — obiectele de stil RN se mapează la stiluri web inline.

Exemplu cu @testing-library/react: ​

jsx
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.jsx tipic:

jsx
import { View, Text, StyleSheet } 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: { 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 scrie în consola browserului.

Pași pentru depanare folosind log-urile din consolă ​

  1. Identifică zona cu probleme: Identifică componenta sau funcția în care suspectezi că se află problema.
  2. Introdu instrucțiuni console.log(): Loghează strategic valorile variabilelor și fluxul de execuție înainte/după codul suspectat.
  3. Verifică rezultatul testelor tale.
  4. Folosește pictograma de depanare (Debug) din zona de previzualizare: Fă clic pe pictograma de depanare din zona de Previzualizare pentru a verifica rezultatul din consolă sau deschide direct consola devtools a browserului.
  5. Analizează rezultatul: Examinează rezultatul logat pentru a înțelege execuția aplicației și pentru a identifica eventualele probleme.

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

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

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

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

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

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