[[oktatas:telefon:react_native|< React Native]] ====== Komponensek külön fájlban ====== * **Szerző:** Sallai András * Copyright (c) Sallai András, 2021, 2023 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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 (
      
      
        
        
        
      
  
    );
  }
}

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 (
        
          Fejrész
        
    );
  }
}
 
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 (
      
        Törzs
      
    );
  }
}
 
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 (
      
        Lábrész
      
    );
  }
}
 
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 (
    
        
            {title}
        
    
  );
}

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
}

//...