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

Framework oferuje gotowe komponenty natywne, takie jak View, Text i Image. Można tworzyć kolejne, używając tych komponentów natywnych jako bloków konstrukcyjnych (building blocks). Na przykład możemy użyć poniższego znacznika, aby utworzyć komponent Button za pomocą TouchableHighlight i Text z React Native.

Listing 1.4. Tworzenie komponentu Button

import { Text, TouchableHighlight } from 'react-native'

const Button = () => (

<TouchableHighlight>

<Text>Hello World</Text>

</TouchableHighlight>

)

export default Button

Następnie możemy zaimportować go i użyć jako nowego przycisku.

Listing 1.5. Import i użycie komponentu Button

import React from 'react'

import { Text, View } from 'react-native'

import Button from './components/Button'

const Home = () => (

<View>

<Text>Welcome to the Hello World Button!</Text>

<Button />

</View>

)

Teraz omówimy podstawy tego, czym są komponenty, jak wpasowują się one w przepływ danych oraz typowe przypadki użycia i wzorce projektowe do ich budowania.