npm 包 react-native-app-settings 使用教程

在 React Native 开发中，我们常常需要使用系统设置中的一些选项，例如语言、声音、通知等等。为了方便开发者，React Native 社区中出现了许多非常实用的 npm 包，其中就包含了访问系统设置的包，那就是 react-native-app-settings。今天，我们将为您介绍如何使用这个 npm 包。

安装

使用 npm 或者 yarn 进行安装：

npm install --save react-native-app-settings

yarn add react-native-app-settings

导入模块

在需要使用系统设置的文件中，导入 react-native-app-settings 模块：

import Settings from 'react-native-app-settings';

功能介绍

react-native-app-settings 可以访问系统的以下设置：

• 暗黑模式
• 语言
• 声音
• 通知

API

我们将按照访问设置的不同，分别介绍 react-native-app-settings 提供的 API：

暗黑模式

isDarkModeEnabled()

判断是否开启了暗黑模式。

Settings.isDarkModeEnabled()
  .then(isEnabled => {
    if(isEnabled) {
      // 暗黑模式已开启
    } else {
      // 暗黑模式未开启
    }
  });

addDarkModeListener()

监听暗黑模式变化事件。

const listener = Settings.addDarkModeListener(isEnabled => {
  if(isEnabled) {
    // 暗黑模式已开启
  } else {
    // 暗黑模式未开启
  }
});

removeDarkModeListener(listener)

移除暗黑模式变化事件的监听器。

Settings.removeDarkModeListener(listener);

语言

getPreferredLanguage()

获取当前设备首选的语言。

Settings.getPreferredLanguage()
  .then(language => {
    console.log(language);
  });

addPreferredLanguageListener()

监听首选语言变化事件。

const listener = Settings.addPreferredLanguageListener(language => {
  console.log(language);
});

removePreferredLanguageListener(listener)

移除首选语言变化事件的监听器。

Settings.removePreferredLanguageListener(listener);

声音

getSoundVolume()

获取当前设备的声音大小。

Settings.getSoundVolume()
  .then(volume => {
    console.log(volume);
  });

setSoundVolume(volume)

设置设备的声音大小。

Settings.setSoundVolume(0.5);

addSoundVolumeListener()

监听声音大小变化事件。

const listener = Settings.addSoundVolumeListener(volume => {
  console.log(volume);
});

removeSoundVolumeListener(listener)

移除声音大小变化事件的监听器。

Settings.removeSoundVolumeListener(listener);

通知

isNotificationEnabled()

判断是否开启了通知。

Settings.isNotificationEnabled()
  .then(isEnabled => {
    if(isEnabled) {
      // 通知已开启
    } else {
      // 通知未开启
    }
  });

addNotificationListener()

监听通知变化事件。

const listener = Settings.addNotificationListener(isEnabled => {
  if(isEnabled) {
    // 通知已开启
  } else {
    // 通知未开启
  }
});

removeNotificationListener(listener)

移除通知变化事件的监听器。

Settings.removeNotificationListener(listener);

示例代码

下面是一个简单的示例代码，演示了如何使用 react-native-app-settings 访问系统设置：

-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ -------- ---- ----------------------------

----- --- - -- -- -
  ----- ------------ -------------- - ----------------
  ----- ---------- ------------ - -------------

  ------------ -- -
    ----- ---------------- - --------------------------------------------
    ----- ---------------- - ---------------------------------------------------

    ----------------------------
      --------------- -- --------------------------

    -------------------------------
      -------------- -- -----------------------

    ------ -- -- -
      --------------------------------------------------
      -----------------------------------------------------------
    --
  -- ----

  ------ -
    ----- -------- ----- -- --------------- --------- ----------- --------- ---------------- ---------- - ------- - ------- ---
      ----- -------- ------ ---------- - ------- - ------- -------------------------
    -------
  --
--

------ ------- ----

结语

通过本文，我们了解了如何使用 react-native-app-settings 访问系统设置。希望这篇文章对您有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f1d9381d61a3540d98