Виникла проблема з оригінальними кнопками реагування, які важко побачити та зрозуміти. Коли ви створюєте кнопку в 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. Компонент App містить елемент TouchableOpacity, який відтворюватиметься як кнопка. Кнопка має стиль styles.button, який визначено в четвертому рядку. Текст кнопки матиме стиль styles.text, який визначено у п’ятому рядку.
Шостий і сьомий рядки визначають стилі для елементів контейнера і кнопки відповідно. Для елемента-контейнера justifyContent і alignItems буде встановлено значення «center», щоб кнопка розташовувалася по центру екрана. Елемент кнопки матиме фоновий колір #4ba37b і ширину 100 пікселів. Він також матиме borderRadius 50, щоб він виглядав як коло, а не прямокутник. Нарешті, для alignItems буде встановлено значення «center», щоб текст у ньому був центрований по вертикалі та горизонталі.
встановити кнопки в React
У React Native є кілька різних типів кнопок:
Button
Введення тексту
RadioButton
прапорець
Як надати стилів кнопкам
Є кілька способів надати стилів кнопкам у React Native.
Одним із способів є використання компонента StyleSheet. Ви можете передати об’єкт стилю як другий аргумент методу create() компонента StyleSheet. Об’єкт style може містити властивості для шрифту, кольору та кольору фону.
Іншим способом є використання компонента Button. Ви можете передати об’єкт стилю як другий аргумент методу create() компонента Button. Об’єкт style може містити властивості для шрифту, кольору та кольору фону.
