Ir problēma ar react vietējām pogām, ko var būt grūti redzēt un saprast. Izveidojot pogu React Native, jums ir iespēja izveidot apaļu vai kvadrātveida pogu. Tomēr, lietojot šīs pogas savā lietotnē, var būt grūti saprast, kura no tām ir apaļa un kura kvadrātveida. Tas var radīt neskaidrības un problēmas, mēģinot izmantot savas lietotnes pogas.
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 } });
Šis kods ir rakstīts programmā React Native un izveido pogu, kas saka “Noklikšķiniet uz manis”. Noklikšķinot uz pogas, tiek veikta darbība.
Pirmajā rindā tiek importētas React un React Native bibliotēkas.
Otrajā rindā tiek izveidots komponents ar nosaukumu App. Šis komponents atveidos pogu.
Trešā rinda atveido lietotnes komponentu. Lietotnes komponents satur elementu TouchableOpacity, kas tiks renderēts kā poga. Pogai ir styles.button stils, kas ir definēts ceturtajā rindā. Pogas tekstam būs styles.text stils, kas ir definēts piektajā rindā.
Sestā un septītā rinda attiecīgi nosaka konteinera un pogas elementu stilus. Konteinera elementam būs iestatīts justifyContent un alignItems uz 'centru', lai poga būtu ekrāna centrā. Pogas elementa fona krāsa būs '#4ba37b' un 100 pikseļu platums. Tā arī apmales rādiuss būs iestatīts uz 50, lai tas parādītos kā aplis, nevis taisnstūris. Visbeidzot, tajā būs alignItems iestatīts uz "centru", lai teksts tajā būtu centrēts vertikāli un horizontāli.
iestatiet pogas React
Programmā React Native ir daži dažādu veidu pogas:
Poga
Teksta ievade
Radio poga
Rūtiņa
Kā pogām piešķirt stilus
Ir daži veidi, kā programmā React Native pogām piešķirt stilus.
Viens veids ir izmantot StyleSheet komponentu. Jūs varat nodot stila objektu kā otro argumentu StyleSheet komponenta metodei create(). Stila objektā var būt rekvizīti fontam, krāsai un fona krāsai.
Vēl viens veids ir izmantot komponentu Button. Varat nodot stila objektu kā otro argumentu Button komponenta izveides () metodei. Stila objektā var būt rekvizīti fontam, krāsai un fona krāsai.
