Symbolschaltfläche in React Native

Icons sind das wichtigste Element der Benutzerinteraktion. Das macht die App nicht nur attraktiv, sondern auch benutzerfreundlicher.

Es hilft auch für eine bessere Benutzererfahrung. Schaltflächen mit Symbolen sind interaktiver als eine Schaltfläche, die nur Text enthält.

Dieser Artikel zeigt, wie wir eine Schaltfläche mit Symbolen in einer React-Native-App implementieren können. Wir werden das Thema am tiefsten erörtern, indem wir die notwendigen Beispiele und Erklärungen verwenden.

Implementieren Sie eine Schaltfläche mit Symbolen in React Native

Unser Beispiel unten zeigt, wie wir eine einfache Symbolschaltfläche in der React-Native-App erstellen können. Unser Code wird wie folgt aussehen:

// Importing necessary packages
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Button, Image, Text, View, Alert} from 'react-native';
import { IconButton, Colors } from 'react-native-paper';

// Our main function
export default function App() {
  return (  // Creating a button with a simple action
    <View style={styles.container}>
      <IconButton
         icon="login"
         size={25}
         onPress={() => Alert.alert('Button clicked !!!')}
      />

    </View>
  );

}

// Providing some style to our simple app.
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    margin: 50,
  },
});

Wir haben bereits den Zweck aller erforderlichen Zeilen in Bezug auf die oben im Beispiel geteilten Schritte befohlen.

Im obigen Beispiel wurde die Symbolschaltfläche mit dem Tag <IconButton /> erstellt. Darin haben wir den Icon-Namen icon="login", die Icon-Größe size={25} und eine einfache Aktion für die Icon-Schaltfläche onPress={() => Alert.alert('Button clicked !! !')}, und das ist es.

Wenn Sie nun den obigen Beispielcode ausführen, erhalten Sie die folgende Ausgabe auf Ihrem Bildschirm.

Ausgang:

Denken Sie daran, dass Sie möglicherweise das react-native-paper installieren und das Paket in Ihr React-Native-Projekt importieren müssen.

Bitte beachten Sie, dass der oben geteilte Beispielcode in React Native erstellt wurde und wir die Expo-CLI verwendet haben, um die App auszuführen.