Terdapat masalah dengan butang asli bertindak balas yang sukar dilihat dan difahami. Apabila anda membuat butang dalam React Native, anda mempunyai pilihan untuk membuat butang bulat atau segi empat sama. Walau bagaimanapun, apabila anda menggunakan butang ini dalam apl anda, sukar untuk melihat yang mana satu bulat dan yang mana satu segi empat sama. Ini boleh menyebabkan kekeliruan dan masalah apabila anda cuba menggunakan butang dalam apl anda.
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 } });
Kod ini ditulis dalam React Native dan mencipta butang yang mengatakan "Klik Saya." Apabila butang diklik, tindakan dilakukan.
Baris pertama mengimport perpustakaan React dan React Native.
Baris kedua mencipta komponen yang dipanggil App. Komponen ini akan menghasilkan butang.
Baris ketiga memaparkan komponen Apl. Komponen Apl mengandungi elemen TouchableOpacity, yang akan dipaparkan sebagai butang. Butang mempunyai gaya styles.button, yang ditakrifkan dalam baris keempat. Teks butang akan mempunyai gaya styles.text, yang ditakrifkan dalam baris kelima.
Baris keenam dan ketujuh masing-masing menentukan gaya untuk elemen bekas dan butang. Elemen kontena akan mempunyai justifyContent dan alignItems ditetapkan kepada 'center', supaya butang akan dipusatkan pada skrin. Elemen butang akan mempunyai warna latar belakang '#4ba37b' dan lebar 100 piksel. Ia juga akan mempunyai borderRadius ditetapkan kepada 50, supaya ia kelihatan sebagai bulatan dan bukannya segi empat tepat. Akhir sekali, ia akan mempunyai alignItems ditetapkan kepada 'tengah', supaya teks di dalamnya dipusatkan secara menegak dan mendatar.
tetapkan Butang dalam React
Terdapat beberapa jenis butang dalam React Native:
Butang
TextInput
Butang radio
Kotak semak
Bagaimana untuk memberi gaya kepada butang
Terdapat beberapa cara untuk memberikan gaya kepada butang dalam React Native.
Satu cara ialah menggunakan komponen StyleSheet. Anda boleh menghantar objek gaya sebagai hujah kedua kepada kaedah create() komponen StyleSheet. Objek gaya boleh mengandungi sifat untuk fon, warna dan warna latar belakang.
Cara lain ialah menggunakan komponen Button. Anda boleh menghantar objek gaya sebagai hujah kedua kepada kaedah create() komponen Button. Objek gaya boleh mengandungi sifat untuk fon, warna dan warna latar belakang.
