נפתרה: להגיב כפתור יליד עגול

יש בעיה עם לחצני תגובה מקוריים שיכולה להיות קשה לראות ולהבין. כאשר אתה יוצר כפתור ב-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. רכיב זה יציג כפתור.

השורה השלישית מציגה את רכיב האפליקציה. רכיב האפליקציה מכיל אלמנט TouchableOpacity, שיוצג כלחצן. לכפתור יש סגנון של styles.button, המוגדר בשורה הרביעית. לטקסט של הכפתור יהיה סגנון של styles.text, המוגדר בשורה החמישית.

השורה השישית והשביעית מגדירות את הסגנונות עבור רכיבי המיכל והלחצן, בהתאמה. לרכיב ה-container יהיה justifyContent ו-alignItems מוגדרים ל'מרכז', כך שהכפתור יהיה מרוכז על המסך. לרכיב הכפתור יהיה צבע רקע של '#4ba37b' ורוחב של 100 פיקסלים. יהיה לו גם borderRadius מוגדר ל-50, כך שהוא יופיע כעיגול ולא כמלבן. לבסוף, alignItems יוגדרו ל'מרכז', כך שהטקסט בתוכו מרוכז אנכית ואופקית.

הגדר כפתורים ב-React

ישנם כמה סוגים שונים של כפתורים ב-React Native:

כפתור

קלט טקסט

רדיוטון

תיבת סימון

איך לתת סגנונות לכפתורים

יש כמה דרכים לתת סגנונות ללחצנים ב-React Native.

דרך אחת היא להשתמש ברכיב StyleSheet. אתה יכול להעביר אובייקט בסגנון כארגומנט השני לשיטת create() של רכיב StyleSheet. אובייקט הסגנון יכול להכיל מאפיינים עבור גופן, צבע וצבע רקע.

דרך נוספת היא להשתמש ברכיב Button. אתה יכול להעביר אובייקט בסגנון כארגומנט השני לשיטת create() של רכיב Button. אובייקט הסגנון יכול להכיל מאפיינים עבור גופן, צבע וצבע רקע.

הודעות קשורות:

השאירו תגובה