Читать книгу React Native w akcji - Nader Dabit - Страница 50

Zobaczmy teraz, jak łączyć komponenty. Najpierw utwórzmy w jednym pliku komponenty Home, Header i Footer. Rozpocznijmy od utworzenia komponentu Home:

import React, { Component } from 'react'

import {

Text,

View

} from 'react-native'

class Home extends Component {

render() {

return (

<View>

</View>)

}

}

W tym samym pliku, poniżej deklaracji klasy Home, zbudujmy komponent Header:

class Header extends Component {

render() {

return <View>

<Text>HEADER</Text>

</View>

}

}

Wygląda to ładnie, ale zobaczmy, jak przepisać Header w komponencie bezstanowym. W dalszej części książki omówimy, kiedy i dlaczego warto używać komponentu bezstanowego w porównaniu ze zwykłą klasą React Native. Jak się przekonamy, składnia i kod są znacznie bardziej przejrzyste, gdy używamy komponentów bezstanowych:

const Header = () => (

<View>

<Text>HEADER</Text>

</View>

)

Umieśćmy teraz Header w komponencie Home:

class Home extends Component {

render() {

return (

<View>

<Header />

</View>

)

}

}

Utwórzmy także Footer i Main:

const Footer = () => (

<View>

<Text>Footer</Text>

</View>

)

const Main = () => (

<View>

<Text> Main </Text>

</View>

)

Wstawmy to teraz w naszej aplikacji:

class Home extends Component {

render() {

return (

<View>

<Header />

<Main />

<Footer />

</View>

)

}

}

Kod, który właśnie napisaliśmy, jest niezwykle deklaratywny, co oznacza, że jest napisany w taki sposób, że opisuje to, co chcemy zrobić, oraz jest łatwy do zrozumienia w oderwaniu od reszty. Jest to ogólny przegląd tego, jak będziemy tworzyć komponenty i widoki w React Native, ale powinno dać to dobry pogląd na podstawy działania.