< React Native

Saját komponens

Szerző: Sallai András

Copyright © Sallai András, 2021

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Szeparátor

const Separator = () => ( <View style={styles.separator} /> ); const App = () => ( <View style={styles.container}> <Text>Első</Text> <Separator /> <Text>Második</Text> </View> ); const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', marginHorizontal: 16, }, separator: { marginVertical: 8, borderBottomColor: '#333', borderBottomWidth: StyleSheet.hairlineWidth, }, }); export default App;

Szöveg fejrésszel

import React from 'react'; import { StyleSheet, View } from 'react-native'; import { Text } from "react-native"; import Header from './components/header'; export default function App() { return ( <View style={styles.container}> <Header /> <Text style={styles.body}>Törzsrész</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, body: { fontSize: 22, } });

A komponenst egy components nevű könyvtárba helyezzük le.

import React from "react"; import { StyleSheet, Text, View } from "react-native"; export default function Header() { return ( <View style={styles.header}> <Text style={styles.title}>Fejrész</Text> </View> ); } const styles = StyleSheet.create({ header: { height: 80, width: '100%', backgroundColor: 'coral', position: 'absolute', top: 0, }, title: { fontSize: 32, textAlign: 'center', paddingTop: 10, fontWeight: 'bold', color: 'white', }, });

Lista

A lista

import React from 'react'; import { StyleSheet, View } from 'react-native'; import { FlatList, Text } from "react-native"; import Header from './components/header'; const DATA = [ { id: '1', task: 'Angular tanulás' }, { id: '2', task: 'Laravel tanulás' }, ]; const Item = ({ task }) => ( <View style={styles.item}> <Text style={styles.task}>{task}</Text> </View> ); export default function App() { const renderItem = ({ item }) => ( <Item task={item.task} /> ); return ( <View style={styles.container}> <Header /> <FlatList data={DATA} renderItem={renderItem} keyExtractor={item => item.id} style={styles.list} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, item: { padding: 10, backgroundColor: '#005588', }, task: { color: 'white', fontSize: 32, }, list: { width: '100%', }, });

Saját komponens

import React from "react"; import { StyleSheet, Text, View } from "react-native"; export default function Header() { return ( <View style={styles.header}> <Text style={styles.title}>Tennivalók</Text> </View> ); } const styles = StyleSheet.create({ header: { height: 80, width: '100%', backgroundColor: 'coral', }, title: { fontSize: 32, textAlign: 'center', paddingTop: 10, }, });