如何解决使用 AsyncStorage（已弃用）警告？使用社区（正确）库

Question

我正在使用 @react-native-community/async-storage 并不断收到此警告：

Warning: Async Storage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-community/async-storage' instead of 'react-native'. See https://github.com/react-native-community/react-native-async-storage

这是我的 package.json：

{
  "name": "mobile_app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@aws-amplify/pushnotification": "^1.0.32",
    "@react-native-community/async-storage": "^1.6.1",
    "aws-amplify": "^1.1.32",
    "aws-amplify-react-native": "^2.1.15",
    "buffer": "^5.3.0",
    "moment": "^2.24.0",
    "react": "16.8.3",
    "react-native": "0.59.9",
    "react-native-ble-plx": "^1.0.3",
    "react-native-calendars": "^1.208.0",
    "react-native-check-box": "^2.1.7",
    "react-native-dialog": "^5.6.0",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-indicators": "^0.13.0",
    "react-native-keyboard-aware-scroll-view": "^0.8.0",
    "react-native-modal-datetime-picker": "^7.5.0",
    "react-native-modalbox": "^1.7.1",
    "react-native-swipeable-row": "^0.8.1",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^3.11.0",
    "react-redux": "^7.1.0",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/runtime": "^7.4.5",
    "babel-jest": "^24.8.0",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.54.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  }
}

我已删除 node_modules 和 yarn.lock 并重新安装。此外，我查看了我所有的依赖项（正如这个问题中所建议的那样：How to remove 'Warning: Async Storage has been extracted from react-native core...'?），它们都没有使用已弃用的异步存储包。

您对如何解决此警告有任何建议吗？

---- 编辑： 有人问我如何导入 AsyncStorage。我只在一个名为 storage-helpers 的文件中的一个地方执行此操作：

import AsyncStorage from '@react-native-community/async-storage';

set_data = async (storage_key, value) => {
    try {
        const value_to_store = JSON.stringify(value);
        return await AsyncStorage.setItem(storage_key, value_to_store);
    } catch (error) {
        console.log(error);
        return error;
    }
}

get_data = async (storage_key) => {
    console.log("Getting Data", storage_key);
    const value = await AsyncStorage.getItem(storage_key)
        .then((returned_value) => {
            const parsed = JSON.parse(returned_value);
            return parsed;
        })
        .catch((error) => {
            console.log("Get Item Error: ", error);
        })
    console.log("Finished Getting Data");
    return value;
}

clear_data = async () => {
    console.log("Clearing Persistent Storage");
    return await AsyncStorage.clear();
}

module.exports = {
    set_data,
    get_data,
    clear_data,
}

Answer 1

确保您使用的是正确的导入：

import AsyncStorage from '@react-native-community/async-storage';

Answer 2

更新

现在有一个新的异步存储库，可以在这里找到

https://github.com/react-native-async-storage/async-storage

查看文档以了解安装和链接说明

https://react-native-async-storage.github.io/async-storage/docs/install/

——

查看您的依赖项列表，列表中的第一个 @aws-amplify/pushnotification 使用来自 react-native 的 AsyncStorage

您可以看到 here 导入了 AsyncStorage。下面是确切的行：

import { NativeModules, DeviceEventEmitter, AsyncStorage, PushNotificationIOS, Platform, AppState } from 'react-native';

这就是您收到警告的原因，这是由于使用 AsyncStorage 的这种依赖关系

在 5 月之前已经提出了一个关于此问题的问题，但此后它已被标记为已关闭。你可以看到问题here。

---

看来@aws-amplify/core 也使用了react-native 中的AsyncStorage。

您可以看到它在 RNComponents here 和 StorageHelper here 中使用。

---

您最好的做法是分叉存储库并修复所有 AsyncStorage 实例以使用正确的版本，或者打开一个问题。

---

仔细检查您的依赖项以查看它们实际使用的内容总是值得的。有时只需搜索他们安装的内容或 github 上的内容就足够了。

Answer 3

似乎异步存储已移至新组织

试试 npm i @react-native-async-storage/async-storage

import AsyncStorage from '@react-native-async-storage/async-storage';

Answer 4

使用以下命令之一获取库

使用 npm：

npm install @react-native-async-storage/async-storage

用纱线：

yarn add @react-native-async-storage/async-storage

使用 Expo CLI：

expo install @react-native-async-storage/async-storage

完成后，导入标题

import AsyncStorage from '@react-native-async-storage/async-storage';

用于存储值

const storeData = async (value) => {
  try {
    await AsyncStorage.setItem('@storage_Key', value)
  } catch (e) {
    // saving error
  }
}

获取价值

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('@storage_Key')
    if(value !== null) {
      // value previously stored
    }
  } catch(e) {
    // error reading value
  }
}

更多：offical link

Answer 5

检查您的依赖项之一是否使用异步存储，并且他们是直接从 react 导入它。