So öffnen Sie die Einstellungs-App aus der React Native-App

Öffnen Sie die Einstellungen-App in React Native

In diesem Beispiel sehen wir, wie Sie die App „Einstellungen“ aus einer React Native-App öffnen. Wenn Ihre App einen Benutzerstandort erfordert, geschieht dies häufig, wenn Sie möchten, dass der Benutzer etwas ausführt, um eine Funktion Ihrer App zu verwenden.

Dann können Sie die Berechtigung überprüfen und, wenn sie nicht erteilt/eingeschränkt ist, den Benutzer an die Einstellungs-App senden, um sie zu aktivieren.

Das Öffnen der Einstellungs-App in React Native ist sehr einfach, Sie können sie direkt aus React Native öffnen. Verbinden. Stellt eine Verbindungs-API bereit Einstellungen öffnen() Funktionen werden an die Einstellungsanwendung umgeleitet.

Um den Link zu importieren

import { Linking } from 'react-native'

Öffnen Sie die Einstellungen-App

Linking.openSettings()

In diesem Beispiel öffnen wir die App „Einstellungen“, indem wir auf eine Schaltfläche klicken. Fangen wir also an.

So erstellen Sie eine React Native-App

Erste Schritte mit React Native hilft Ihnen dabei, mehr darüber zu erfahren, wie Sie ein React Native-Projekt erstellen. Wir werden React-Native-Init verwenden, um unsere React-Native-App zu erstellen. Vorausgesetzt, Sie haben node installiert, können Sie die Installation mit npm durchführen react-native-cli Befehlszeilenprogramm. Öffnen Sie Terminal und gehen Sie zu Workspace und führen Sie es aus

npm install -g react-native-cli

Führen Sie die folgenden Befehle aus, um ein neues React Native-Projekt zu erstellen

react-native init ProjectName

Wenn Sie ein neues Projekt mit einer bestimmten React Native-Version starten möchten, können Sie das Argument –version verwenden:

react-native init ProjectName --version X.XX.X
react-native init ProjectName --version [email protected]

Dadurch wird ein Projektframework mit einer Codedatei namens App.js in Ihrem Projektverzeichnis erstellt.

Code

Öffnen Sie App.js in einem beliebigen Code-Editor und ersetzen Sie den Code durch den folgenden Code

App.js

// How to Open Settings App from React Native App
// https://aboutreact.com/open-settings-app-in-react-native/

// import React in our code
import React, {useCallback} from 'react';

// import all the components we are going to use
import {
  StyleSheet,
  Text,
  SafeAreaView,
  View,
  TouchableOpacity,
  Linking,
} from 'react-native';

const App = () => {
  const _openAppSetting = useCallback(async () => {
    // Open the custom settings if the app has one
    await Linking.openSettings();
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.innerContainer}>
        <Text style={styles.titleText}>
          How to open Settings App in React Native
        </Text>
        <TouchableOpacity
          activeOpacity={0.5}
          style={styles.buttonStyle}
          onPress={_openAppSetting}>
          <Text style={styles.buttonTextStyle}>
            Open the Settings App
          </Text>
        </TouchableOpacity>
      </View>
      <Text style={styles.footerHeading}>
        React Native System Settings
      </Text>
      <Text style={styles.footerText}>
        www.aboutreact.com
      </Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  innerContainer: {
    flex: 1,
    alignItems: 'center',
    padding: 35,
    justifyContent: 'center',
  },
  titleText: {
    fontSize: 22,
    fontWeight: 'bold',
    textAlign: 'center',
    paddingVertical: 20,
  },
  buttonTextStyle: {
    color: 'white',
    fontWeight: 'bold',
  },
  buttonStyle: {
    alignItems: 'center',
    backgroundColor: 'green',
    padding: 10,
    width: '100%',
    marginTop: 16,
  },
  footerHeading: {
    fontSize: 18,
    textAlign: 'center',
    color: 'grey',
  },
  footerText: {
    fontSize: 16,
    textAlign: 'center',
    color: 'grey',
  },
});
export default App;

So führen Sie eine React Native-App aus

Öffnen Sie Terminal erneut und navigieren Sie mit zu Ihrem Projekt

cd ProjectName

Führen Sie das Projekt auf einem virtuellen Android-Gerät oder einem echten Debugging-Gerät aus

react-native run-android

oder durch Ausführung im iOS-Simulator (nur macOS)

react-native run-ios

Laden Sie den Quellcode herunter

Screenshots ausgeben

So können Sie die Einstellungen-App aus der React Native-App öffnen. Wenn Sie Zweifel haben oder etwas über das Thema mitteilen möchten, kommentieren Sie unten oder kontaktieren Sie uns hier. Die restlichen Elemente werden im nächsten Artikel besprochen. Warte ab!

Ich hoffe, es hat euch gefallen. 🙂