Obstaja težava z izvirnimi gumbi za odziv, ki jih je težko videti in razumeti. Ko ustvarite gumb v React Native, imate možnost ustvariti okrogel ali kvadraten gumb. Vendar pa je pri uporabi teh gumbov v aplikaciji težko videti, kateri je okrogel in kateri kvadraten. To lahko povzroči zmedo in težave, ko poskušate uporabiti gumbe v svoji aplikaciji.
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 } });
Ta koda je napisana v React Native in ustvari gumb z napisom »Klikni me«. Ko kliknete gumb, se izvede dejanje.
Prva vrstica uvozi knjižnici React in React Native.
Druga vrstica ustvari komponento z imenom App. Ta komponenta bo upodobila gumb.
Tretja vrstica upodobi komponento aplikacije. Komponenta aplikacije vsebuje element TouchableOpacity, ki bo upodobljen kot gumb. Gumb ima slog styles.button, ki je definiran v četrti vrstici. Besedilo gumba bo imelo slog styles.text, ki je definiran v peti vrstici.
Šesta in sedma vrstica določata sloge za elemente vsebnika oziroma gumbe. Element vsebnika bo imel justifyContent in alignItems nastavljen na 'center', tako da bo gumb na sredini zaslona. Element gumba bo imel barvo ozadja '#4ba37b' in širino 100 slikovnih pik. Prav tako bo imel borderRadius nastavljen na 50, tako da bo videti kot krog in ne kot pravokotnik. Končno bo imel alignItems nastavljen na 'center', tako da bo besedilo v njem centrirano navpično in vodoravno.
nastavite gumbe v React
V React Native obstaja nekaj različnih tipov gumbov:
Button
TextInput
Radijski gumb
Potrditveno polje
Kako gumbom dati sloge
Obstaja nekaj načinov, kako gumbom v React Native dati sloge.
Eden od načinov je uporaba komponente StyleSheet. Slogovni objekt lahko posredujete kot drugi argument metodi create() komponente StyleSheet. Slogovni objekt lahko vsebuje lastnosti za pisavo, barvo in barvo ozadja.
Drug način je uporaba komponente Button. Slogovni objekt lahko posredujete kot drugi argument metodi create() komponente Button. Slogovni objekt lahko vsebuje lastnosti za pisavo, barvo in barvo ozadja.
