Vyskytol sa problém s natívnymi tlačidlami, ktoré môžu byť ťažko viditeľné a pochopiteľné. Keď vytvoríte tlačidlo v React Native, máte možnosť vytvoriť okrúhle alebo štvorcové tlačidlo. Keď však vo svojej aplikácii použijete tieto tlačidlá, môže byť ťažké zistiť, ktoré z nich je okrúhle a ktoré štvorcové. To môže viesť k zmätku a problémom, keď sa pokúšate použiť tlačidlá vo svojej aplikácii.
border
import React, { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.container}> <TouchableOpacity style={styles.button}> <Text style={styles.text}>Click Me</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { backgroundColor:'#4ba37b', width:100, borderRadius:50, alignItems:'center', paddingTop:14 }, text:{ color:'#fff', fontSize:16 } });
Tento kód je napísaný v React Native a vytvára tlačidlo s nápisom „Click Me“. Po kliknutí na tlačidlo sa vykoná akcia.
Prvý riadok importuje knižnice React a React Native.
Druhý riadok vytvorí komponent s názvom App. Tento komponent vykreslí tlačidlo.
Tretí riadok zobrazuje komponent App. Komponent App obsahuje prvok TouchableOpacity, ktorý sa vykreslí ako tlačidlo. Tlačidlo má štýl styles.button, ktorý je definovaný v štvrtom riadku. Text tlačidla bude mať štýl styles.text, ktorý je definovaný v piatom riadku.
Šiesty a siedmy riadok definujú štýly pre prvky kontajnera a tlačidla. Element kontajnera bude mať justifyContent a alignItems nastavené na „centrovať“, takže tlačidlo bude na obrazovke vycentrované. Prvok tlačidla bude mať farbu pozadia „#4ba37b“ a šírku 100 pixelov. Bude mať tiež borderRadius nastavený na 50, takže sa zobrazí ako kruh a nie ako obdĺžnik. Nakoniec bude mať alignItems nastavené na 'centrovať', takže text v ňom bude centrovaný vertikálne a horizontálne.
nastavte tlačidlá v React
V React Native je niekoľko rôznych typov tlačidiel:
gombík
TextInput
Tlačítko na Rádiu
Checkbox
Ako dať štýly tlačidlám
Existuje niekoľko spôsobov, ako dať štýly tlačidlám v React Native.
Jedným zo spôsobov je použitie komponentu StyleSheet. Objekt štýlu môžete odovzdať ako druhý argument metóde create() komponentu StyleSheet. Objekt štýlu môže obsahovať vlastnosti pre písmo, farbu a farbu pozadia.
Ďalším spôsobom je použitie komponentu Button. Objekt štýlu môžete odovzdať ako druhý argument metóde create() komponentu Button. Objekt štýlu môže obsahovať vlastnosti pre písmo, farbu a farbu pozadia.
