szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[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


<code javascript Valami.js>
import React from 'react'

export default function Valami(props) {
    

    return (
        <>
            
        </>
    )
}
</code>

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 ====


<code javascript 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',
  },
});

</code>


==== Komponensek ====

<code javascript components/head.js>
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%'
  },
});
</code>


<code javascript components/body.js>
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%',
  },
});
</code>


<code javascript components/foot.js>
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%',
  },
});
</code>

===== Gomb külön =====


Saját nyomógomb forráskódja:
<code javascript components/Button.js>
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>
  );
}
</code>

A hozzátartozó stílus:
<code javascript components/Button.style.js>
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,
  }
});
</code>


Felhasználás:
<code javascript App.js>
//...
import Button from './components/Button';

//...

function handlePress() {
   //tevékenység
}

//...
<Button title='Felirat' onPress={handlePress} />
</code>
szit

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon
