< React Native

Komponensek külön fájlban

Szerző: Sallai András

Copyright © Sallai András, 2021, 2023

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Rövidítés

Visual Studio Code rövidítés:

rfced

import React from 'react' export default function Valami(props) { return ( <> </> ) }

A függvény neve automatikusan felveszi a fájl nevét.

Komponens külön

Külön fájl

Készítsünk a projekt gyökér könyvtárában egy components nevű könyvtárat. Itt fogjuk elhelyezni a komponenseinket.

App.js

import React, { Component} from 'react'; import { View, StyleSheet, Button, Text } from 'react-native'; import Head from './components/head'; import Body from './components/body'; import Foot from './components/foot'; export default class App extends Component { render() { return ( <View style={styles.container}> <Head /> <Body /> <Foot /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'skyblue', alignItems: 'center', justifyContent: 'center', }, });

Komponensek

import React, { Component} from 'react'; import { View, StyleSheet, Text } from 'react-native'; export default class ComponentA extends Component { render() { return ( <View style={styles.container}> <Text style={{fontSize: 34}}>Fejrész</Text> </View> ); } } const styles = StyleSheet.create({ container: { padding: 20, backgroundColor: 'orange', alignItems: 'center', justifyContent: 'center', width: '100%' }, });
import React, { Component} from 'react'; import { View, StyleSheet, Text } from 'react-native'; export default class ComponentB extends Component { render() { return ( <View style={styles.container}> <Text>Törzs</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', width: '100%', }, });
import React, { Component} from 'react'; import { View, StyleSheet, Text } from 'react-native'; export default class ComponentC extends Component { render() { return ( <View style={styles.container}> <Text>Lábrész</Text> </View> ); } } const styles = StyleSheet.create({ container: { height: 40, backgroundColor: 'green', alignItems: 'center', justifyContent: 'center', width: '100%', }, });

Gomb külön

Saját nyomógomb forráskódja:

import React from 'react'; import { Text, View, TouchableHighlight } from 'react-native'; import styles from './Button.style'; export default ({title, onPress}) => { return ( <View style={styles.container}> <TouchableHighlight style={styles.runButton} onPress={onPress} > <Text style={styles.runText}>{title}</Text> </TouchableHighlight> </View> ); }

A hozzátartozó stílus:

import { StyleSheet } from 'react-native'; export default StyleSheet.create({ container: { backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, runButton: { backgroundColor: 'blue', margin: 5, padding: 10, borderRadius: 3, }, runText: { color: 'white', paddingLeft: 10, paddingRight: 10, fontSize: 32, } });

Felhasználás:

//... import Button from './components/Button'; //... function handlePress() { //tevékenység } //... <Button title='Felirat' onPress={handlePress} />