[[oktatas:telefon:react_native|< React Native]]
====== Stílus beállítása ======
* **Szerző:** Sallai András
* Copyright (c) 2021, Sallai András
* Szerkesztve: 2021, 2023, 2024
* Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
* Web: https://szit.hu
===== Színek =====
* https://reactnative.dev/docs/colors (2024)
===== A beállított számok =====
A React Native-ban((https://reactnative.dev/docs/height-and-width)) beállított számok, minden esetben
**egység nélküli, sűrűségfüggetlen képpontok**.
===== Stílus beállítása inline =====
Kék
és félkövér
===== StyleSheet osztály =====
A **StyleSheet.create()** CSS stílusok létrehozására használható.
const styles = StyleSheet.create({
input: {
borderWidth: 1,
width: '50%',
fontSize: 32,
textAlign: 'center',
marginTo: 30,
}
});
===== Inline elemek =====
Valmai
==== Inline másik példa ====
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
Egy
Kettő
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'lightgray',
alignItems: 'center',
justifyContent: 'center',
}
});
==== Az igazítás ====
A React Native-ban a gyökérkomponens display értéke alapértelmezetten: flex.
display: 'flex';
Az alapértelmezett irány:
flexDriection: 'column'
A column azt jelenti, az elemeket egymás alá tesszük. Az irány lefelé mutat.
{{:oktatas:telefon:react_native:flex_doboz_igazitas.png|}}
=== justifyContent ===
A justifyContent ebben az irányban igazít. Tehát ha column van beállítva, akkor függőlegesen.
Ha viszont flexDirection: 'row' van beállítva, akkor a justifyContent
vízszintesen igazít.
=== alignItems ===
Az alignItems ellentétesen igazít a jsutifyContent-tel szembe.
===== Több stílus =====
Kilépés a programból:
Az inline és a external stílus keverése:
const App = () => {
return (
Valmai
Valmai
);
};
const styles = StyleSheet.create({
container: {
marginTop: 32,
paddingHorizontal: 24,
backgroundColor: 'skyblue',
},
});
===== Stílus külön fájlba =====
import React from 'react';
import styles from './App.style.js';
import {
Text,
View,
} from 'react-native';
const App = () => {
return (
Valmai
Valmai
);
};
export default App;
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
container: {
marginTop: 32,
paddingHorizontal: 24,
backgroundColor: 'skyblue',
},
});
===== Stílus külön fájlba másként =====
import { StyleSheet } from "react-native";
export const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
Használata:
//...
import { styles } from './App.style';
//...
Példa
===== Stílus =====
Néhány tulajdonság példa:
* fontWeight: 'bold'
* paddingHorizontal: 24,
* marginTop: 32,
* justifyContent: 'center',
* alignItems: 'center',
===== Több tulajdonság =====
Ez működik:
border: 'solid 2px blue',
Ez már nem működik:
borderTop: 'solid 2px blue',
Így működik:
borderTopStyle: 'solid',
borderTopWidth: '2px',
borderTopColor: 'blue',
===== Árnyék =====
Android:
item: {
elevation: 5
}
iOS
item: {
shadowColor: '#171717',
shadowOffset: {width: 5, height: 5},
shadowOpacity: 0.2,
shadowRadius: 3,
},
Egyben:
item: {
shadowColor: '#171717',
shadowOffset: {width: 5, height: 5},
shadowOpacity: 0.2,
shadowRadius: 3,
elevation: 5
},
===== Szövegárnyék =====
text: {
fontSize: 30,
textShadowColor: 'black',
textShadowOffset: {width: 5, height: 5},
textShadowRadius: 5,
},
===== Több stílus =====
Egy elemhez megadható több stílus is, csak használjunk szögletes zárójeleket:
{item.name}
===== Páros, páratlan =====
Egy list práros és páratlan sorait szeretnénk más stílussal meghatározni.
A CSS nth-child nem áll rendelkezésre:
Helyette:
import { FlatList, StyleSheet, Text, View } from 'react-native';
const employees = [
{id: 1, name: 'Erős István', city: 'Szeged'},
{id: 2, name: 'Táncos Ernő', city: 'Szeged'},
{id: 3, name: 'Szabó Tamásaaa', city: 'Szeged'}
];
export default function App() {
return (
Dolgozók
(
{item.name}
{item.city}
)}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#299dc5',
alignItems: 'center',
justifyContent: 'center',
},
item: {
flexDirection: 'row',
width: '100%',
paddingTop: 1,
},
title: {
marginTop: 24,
fontSize: 34,
},
flat: {
width: '100%',
},
subItem: {
fontSize: 16,
flex: 1,
color: '#333',
padding: 5,
},
evenRow: {
backgroundColor: '#2395c0'
},
oddRow: {
backgroundColor: '#2591c4'
},
});
{{:oktatas:telefon:react_native:paros_paratlan_css.png|}}
===== Mértékegységek =====
Telefon esetén vh helyett ajánott svh-t vagy dvh-t használni.
| svh | small vh |
| lvh | large vh |
| dvh | dynamic vh |