`无法解析模块@react-native-community/async-storage` 破坏了我的 React Native 环境

Question

我基本上遇到了与这里相同的问题。

https://github.com/firebase/firebase-js-sdk/issues/1899

我是如何得到这个错误的

由于AsyncStorage已弃用，我尝试@react-native-community/async-storage按照官方文档进行安装

但它完全失败了，因为我得到了上面的错误。因此，我想回滚到我以前的工作版本，除了我所做的没有工作。

这些都没有解决我的问题

1. 错误屏幕上建议的 4 个命令
2. 撤消yarn add与yarn remove
3. 我也做过npm install @react-native-community/async-storage，没用。3.5 so I didnpm uninstall @react-native-community/async-storage它被删除了，但是回滚不起作用。
4. 重新安装 react-native-cli
5. 从头开始重新创建一个全新的项目，但它仍然给出同样的错误。

我找不到解决方案。请帮忙。

Answer 1

如果它在iOS你可能忘了做pod install。

把这个贴在里面ios/Podfile：

  pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage'

然后就做 cd ios && pod install

编辑。

我从头开始创建一个项目，这是我在 iOS 和 Android 上运行 asyncStorage 的步骤：

1) react-native init AsyncTest

2) npm i @react-native-community/async-storage

（在此步骤中尝试使用 asyncStorage 显示错误，但适用于 Android）

3) 将这个 pod 粘贴到 Podfile 中：

  pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage'

4）从终端，假设你在项目文件夹中做cd ios和pod install

5）项目在iOS上成功运行并运行。

react-native 版本是 0.60.4

这是项目测试 App.js 用于测试的方式：

import React from 'react';
import { View } from 'react-native';
import AsyncStorageTest from './AsyncStorageTest'
const App = () => {
  return (
    <View>
      <AsyncStorageTest />
    </View>
  );
};

export default App

而 AsyncStorageTest 是：

import React, { Component } from 'react'
import { View, Text, Button } from 'react-native'
import AsyncStorage from '@react-native-community/async-storage';

export class AsyncStorageTest extends Component {
    constructor(props) {
        super(props)
        this.state = {
            storedData: "myValue"
        }
    }


storeData = async () => {
    console.log("inside storeData")
    try {
        await AsyncStorage.setItem('Test', 'TestValue')
    } catch (e) {
        console.log(e)
    }
}

getData = async () => {
    console.log("inside getData")
    try {
        const value = await AsyncStorage.getItem('Test')
        this.setState({ storedData: value })

    } catch (e) {
        // error reading value
    }
}

render() {
    return (
        <View style={{ marginTop: 40 }}>
            <Text> {this.state.storedData}</Text>
            <Button title={"storeData"} onPress={this.storeData}></Button>
            <Button title={"getData"} onPress={this.getData}></Button>
        </View>
    )
}
}


export default AsyncStorageTest

测试和工作，看看你是否错过了什么。

确保@react-native-community/async-storage从您的项目中取消链接。

Answer 2

不知何故，包的路径发生了变化。

这帮助了我：

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

Answer 3

对于像我这样的人，也请仔细检查这一点：

安装时，npm i @react-native-community/async-storage您应该将其导入为，import AsyncStorage from '@react-native-community/async-storage';并且不要导入为import AsyncStorage from '@react-native-async-storage/async-storage';