Probléma van a react natív gombokkal, amelyeket nehéz lehet látni és megérteni. Amikor létrehoz egy gombot a React Native alkalmazásban, lehetősége van kerek vagy négyzet alakú gomb létrehozására. Ha azonban ezeket a gombokat használja az alkalmazásban, nehéz lehet megállapítani, hogy melyik kerek és melyik négyzet alakú. Ez zavart és problémákat okozhat, amikor megpróbálja használni az alkalmazás gombjait.
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 } });
Ez a kód a React Native programban van megírva, és létrehoz egy „Click Me” feliratú gombot. A gombra kattintva egy művelet végrehajtásra kerül.
Az első sor a React és React Native könyvtárakat importálja.
A második sor létrehozza az App nevű összetevőt. Ez az összetevő egy gombot jelenít meg.
A harmadik sor az App komponenst jeleníti meg. Az App komponens TouchableOpacity elemet tartalmaz, amely gombként jelenik meg. A gombnak van styles.button stílusa, amely a negyedik sorban van meghatározva. A gomb szövegének stílusa styles.text lesz, amely az ötödik sorban van meghatározva.
A hatodik és hetedik sor határozza meg a tároló és a gombelemek stílusát. A tárolóelem justifyContent és alignItems értéke „középre” lesz állítva, így a gomb a képernyő közepén lesz. A gombelem háttérszíne '#4ba37b' lesz, szélessége pedig 100 pixel. A határsugár 50-re lesz állítva, így inkább körként jelenik meg, mint téglalapként. Végül az alignItems "középre" lesz állítva, így a benne lévő szöveg függőlegesen és vízszintesen középre kerül.
állítsa be a gombokat a React-ban
A React Native programban többféle gomb található:
Gomb
Szövegbevitel
Rádiógomb
jelölőnégyzetet
Hogyan adjunk stílust a gomboknak
Számos módja van a React Native gombjainak stílusok megadására.
Az egyik módja a StyleSheet komponens használata. Második argumentumként átadhat egy stílusobjektumot a StyleSheet összetevő create() metódusának. A stílusobjektum tartalmazhat betűtípus-, szín- és háttérszín-tulajdonságokat.
Egy másik módszer a Button komponens használata. Második argumentumként átadhat egy stílusobjektumot a Button összetevő create() metódusának. A stílusobjektum tartalmazhat betűtípus-, szín- és háttérszín-tulajdonságokat.
