Функціональні та класові компоненти

Відкривши створену першу програму побачимо таку структуру:

Резервний код

App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Згори підключаються імпорти. В даному випадку StatusBar і базові компоненти. Далі слідує головна функція нашого додатку реалізована, як функціональний компонент, який повертає розмітку. В самому низу програми описані стилі, застосовані до компонентів.

Якщо хтось звик до класових компонентів, можна писати код і на них:

Резервний код

App.js

import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center" },
});

export default App;

Посилання на офіційну документацію:

Функціональні та класові компоненти