Има проблем с естествените бутони за реакция, които могат да бъдат трудни за виждане и разбиране. Когато създавате бутон в React Native, имате възможност да създадете кръгъл или квадратен бутон. Въпреки това, когато използвате тези бутони в приложението си, може да е трудно да видите кой е кръгъл и кой е квадратен. Това може да доведе до объркване и проблеми, когато се опитвате да използвате бутоните в приложението си.
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 } });
Този код е написан на React Native и създава бутон, който казва „Щракнете върху мен“. Когато се щракне върху бутона, се извършва действие.
Първият ред импортира React и React Native библиотеките.
Вторият ред създава компонент, наречен App. Този компонент ще визуализира бутон.
Третият ред изобразява компонента App. Компонентът на приложението съдържа елемент TouchableOpacity, който ще се визуализира като бутон. Бутонът има стил styles.button, който е дефиниран в четвъртия ред. Текстът на бутона ще има стил styles.text, който е дефиниран в петия ред.
Шестият и седмият ред дефинират стиловете съответно за елементите контейнер и бутон. Контейнерният елемент ще има justifyContent и alignItems, зададени на 'center', така че бутонът да бъде центриран на екрана. Елементът на бутона ще има цвят на фона „#4ba37b“ и ширина 100 пиксела. Той също така ще има borderRadius, зададен на 50, така че да изглежда като кръг, а не като правоъгълник. И накрая, той ще има alignItems, зададен на 'center', така че текстът в него да е центриран вертикално и хоризонтално.
задайте бутони в React
Има няколко различни типа бутони в React Native:
Бутон
Въвеждане на текст
Радио бутон
Checkbox
Как да придадете стилове на бутоните
Има няколко начина да дадете стилове на бутоните в React Native.
Един от начините е да използвате компонента StyleSheet. Можете да подадете стилов обект като втори аргумент към метода create() на компонента StyleSheet. Стилният обект може да съдържа свойства за шрифт, цвят и цвят на фона.
Друг начин е да използвате компонента Button. Можете да подадете стилов обект като втори аргумент към метода create() на компонента Button. Стилният обект може да съдържа свойства за шрифт, цвят и цвят на фона.
