Yerel tepki düğmeleriyle ilgili olarak görülmesi ve anlaşılması zor olabilen bir sorun var. React Native'de bir düğme oluşturduğunuzda, yuvarlak veya kare bir düğme oluşturma seçeneğiniz vardır. Ancak uygulamanızda bu butonları kullandığınızda hangisinin yuvarlak hangisinin kare olduğunu anlamak zor olabilir. Bu, uygulamanızdaki düğmeleri kullanmaya çalışırken kafa karışıklığına ve sorunlara yol açabilir.
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 } });
Bu kod React Native'de yazılmıştır ve "Click Me" yazan bir düğme oluşturur. Butona tıklandığında bir işlem gerçekleştirilir.
İlk satır, React ve React Native kitaplıklarını içe aktarır.
İkinci satır, App adlı bir bileşen oluşturur. Bu bileşen bir düğme oluşturacaktır.
Üçüncü satır, Uygulama bileşenini oluşturur. App bileşeni, bir düğme olarak işlenecek bir TouchableOpacity öğesi içerir. Düğme, dördüncü satırda tanımlanan bir styles.button stiline sahiptir. Düğmenin metni, beşinci satırda tanımlanan styles.text stiline sahip olacaktır.
Altıncı ve yedinci satırlar sırasıyla kapsayıcı ve düğme öğeleri için stilleri tanımlar. Konteyner öğesi, düğmenin ekranda ortalanması için justifyContent ve alignItems 'center' olarak ayarlanmış olacaktır. Düğme öğesinin backgroundColor değeri '#4ba37b' ve genişliği 100 piksel olacaktır. Ayrıca borderRadius 50 olarak ayarlanacak, böylece dikdörtgen yerine daire olarak görünecek. Son olarak, içindeki metnin dikey ve yatay olarak ortalanması için, 'orta' olarak ayarlanmış hizalama Öğelerine sahip olacaktır.
React'te Düğmeleri ayarlayın
React Native'de birkaç farklı düğme türü vardır:
düğme
Metin Girişi
RadioButton
Onay Kutusu
Düğmelere stiller nasıl verilir
React Native'de düğmelere stil vermenin birkaç yolu vardır.
Bunun bir yolu, StyleSheet bileşenini kullanmaktır. StyleSheet bileşeninin create() yöntemine ikinci argüman olarak bir stil nesnesi iletebilirsiniz. Stil nesnesi, yazı tipi, renk ve arka plan rengi için özellikler içerebilir.
Başka bir yol da Button bileşenini kullanmaktır. Button bileşeninin create() yöntemine ikinci bağımsız değişken olarak bir stil nesnesi iletebilirsiniz. Stil nesnesi, yazı tipi, renk ve arka plan rengi için özellikler içerebilir.
