React-natiivipainikkeissa on ongelma, jota voi olla vaikea nähdä ja ymmärtää. Kun luot painikkeen React Nativessa, voit luoda pyöreän tai neliömäisen painikkeen. Kuitenkin, kun käytät näitä painikkeita sovelluksessasi, voi olla vaikea nähdä, mikä niistä on pyöreä ja kumpi neliömäinen. Tämä voi aiheuttaa hämmennystä ja ongelmia, kun yrität käyttää sovelluksesi painikkeita.
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 } });
Tämä koodi on kirjoitettu React Nativessa ja se luo painikkeen, jossa lukee "Click Me". Kun painiketta napsautetaan, toiminto suoritetaan.
Ensimmäinen rivi tuo React- ja React Native -kirjastot.
Toinen rivi luo komponentin nimeltä App. Tämä komponentti tekee painikkeen.
Kolmas rivi näyttää sovelluskomponentin. Sovelluskomponentti sisältää TouchableOpacity-elementin, joka hahmonnetaan painikkeena. Painikkeella on tyyli styles.button, joka määritellään neljännellä rivillä. Painikkeen tekstin tyyli on styles.text, joka määritellään viidennellä rivillä.
Kuudes ja seitsemäs rivi määrittelevät säilön ja painikeelementtien tyylit, vastaavasti. Säiliöelementin justifyContent- ja alignItems-arvot on asetettu keskelle, joten painike on näytön keskellä. Painikeelementin taustaväri on '#4ba37b' ja leveys 100 pikseliä. Sen rajasäde on myös asetettu arvoon 50, joten se näkyy ympyränä suorakulmion sijaan. Lopuksi sen alignItems on asetettu keskelle, joten sen sisällä oleva teksti on keskitetty pysty- ja vaakasuunnassa.
aseta painikkeet Reactissa
React Nativessa on muutamia erilaisia painikkeita:
Button
Tekstinsyöttö
Radiopainike
Valintaruutu
Kuinka antaa painikkeille tyyliä
On olemassa muutamia tapoja antaa tyylejä React Nativen painikkeille.
Yksi tapa on käyttää StyleSheet-komponenttia. Voit välittää tyyliobjektin toisena argumenttina StyleSheet-komponentin create()-metodille. Tyyliobjekti voi sisältää ominaisuuksia fontille, värille ja taustavärille.
Toinen tapa on käyttää Button-komponenttia. Voit välittää tyyliobjektin Button-komponentin create()-menetelmän toisena argumenttina. Tyyliobjekti voi sisältää ominaisuuksia fontille, värille ja taustavärille.
