Existuje problém s nativními tlačítky, která mohou být obtížně viditelná a pochopitelná. Když vytvoříte tlačítko v React Native, máte možnost vytvořit kulaté nebo čtvercové tlačítko. Když však tato tlačítka ve své aplikaci použijete, může být obtížné zjistit, které z nich je kulaté a které čtvercové. To může vést ke zmatkům a problémům, když se pokoušíte používat tlačítka v aplikaci.
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 napsán v React Native a vytváří tlačítko s nápisem „Click Me“. Po kliknutí na tlačítko se provede akce.
První řádek importuje knihovny React a React Native.
Druhý řádek vytvoří komponentu s názvem App. Tato komponenta vykreslí tlačítko.
Třetí řádek vykresluje komponentu App. Komponenta App obsahuje prvek TouchableOpacity, který se vykreslí jako tlačítko. Tlačítko má styl styles.button, který je definován ve čtvrtém řádku. Text tlačítka bude mít styl styles.text, který je definován v pátém řádku.
Šestý a sedmý řádek definují styly pro prvky kontejneru a tlačítka. Element kontejneru bude mít justifyContent a alignItems nastaveny na 'centrovat', takže tlačítko bude na obrazovce vycentrováno. Prvek tlačítka bude mít barvu pozadí „#4ba37b“ a šířku 100 pixelů. Bude mít také borderRadius nastavený na 50, takže se zobrazí jako kruh, nikoli jako obdélník. Nakonec bude mít alignItems nastaveno na 'centrovat', takže text v něm bude vertikálně a horizontálně vycentrován.
nastavte tlačítka v React
V React Native je několik různých typů tlačítek:
Tlačítko
TextInput
RadioButton
Checkbox
Jak dát tlačítkům styly
Existuje několik způsobů, jak dát tlačítkům styly v React Native.
Jedním ze způsobů je použití komponenty StyleSheet. Objekt stylu můžete předat jako druhý argument metodě create() komponenty StyleSheet. Objekt stylu může obsahovat vlastnosti pro písmo, barvu a barvu pozadí.
Dalším způsobem je použití komponenty Button. Objekt stylu můžete předat jako druhý argument metodě create() komponenty Button. Objekt stylu může obsahovat vlastnosti pro písmo, barvu a barvu pozadí.
