👌

React Native でアプリの設定画面に遷移させたいを実現する方法がめっちゃ簡単だった

2023/02/10に公開

Android

やりたいこと

あるボタンを押下した場合に
アプリの通知設定とか位置情報設定ができる画面に遷移させたい

たとえば、アプリ内の「通知設定ボタン」を押下したら
アプリの通知のオンオフを切り替えられる画面に遷移して
その設定画面で通知のオンオフを切り替えられる動きをイメージしてます

実現方法

Linking.openSettings(); を使用すれば実現できます！

これで iOS と Android の両方で期待値通りに動きます！

Linking.openURL('app-settings:'); でも設定画面に遷移できますが、バージョンに応じて挙動が異なったりするので、Linking.openSettings();を使用するで問題ないです。

React Native の Linking は
デフォルトで提供されているAPIなので、ライブラリなしで実装できます

まずは、以下のような SettingButtonコンポーネント を実装します

// SettingButton / index.tsx

import { Button, Linking, View } from "react-native";

export const SettingButton = () => {
  const navigateToSettings = () => Linking.openSettings()

  return  (
    <View style={{ flex: 1, justifyContent: "center" }}>
      <Button title="アプリの設定画面に遷移する" onPress={navigateToSettings} />
    </View>
  )
}

そして、コンポーネントを App.tsx で呼び出すと、以下の様な画面が表示されます

設定画面に遷移するボタン

アプリの設定画面に遷移するボタンをクリックします

そうすると、以下キャプチャの様な
アプリの設定画面を開くことが出来ます

遷移後の設定画面

完璧ですね！やりたいこと実現達成！

参考文献

React-Nativeで設定画面に遷移する

やりたいこと

実現方法

参考文献

Discussion