使用 Redux 工具包运行 React Native 应用程序会引发错误

Question

当我尝试运行应用程序时，它会在终端中显示一个带有此错误的红屏

Error: Unable to resolve module `../../../../src/assets/images` from `node_modules/@reduxjs/toolkit/dist/redux-toolkit.cjs.production.min.js`:

但它也发生在 iOS 上

到目前为止，实现它的唯一方法是卸载 react-redux。我的代码中没有任何指向 src/assets/images 的导入，因为我没有以 assets/images 目录开头。

我的 index.js：

import React from 'react';
import 'expo-asset';
import 'react-native-gesture-handler';
import {AppRegistry, View} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { Provider as ReduxProvider } from 'react-redux';
import store from 'src/redux';

import React from 'react';
import 'expo-asset';
import 'react-native-gesture-handler';
import {AppRegistry, View} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { Provider as ReduxProvider } from 'react-redux';
import store from 'src/redux';

const reduxApp = () => (
<ReduxProvider store={store}>
    <App />
</ReduxProvider>
)
AppRegistry.registerComponent('main', () => reduxApp);

Redux 商店：

import { configureStore, getDefaultMiddleware} from '@reduxjs/toolkit';
import logger from 'redux-logger';
import { persistStore } from 'redux-persist';
import reducer from './reducers'


const middleware = [...getDefaultMiddleware(), logger]

const store = configureStore({
  reducer,
  middleware,
})

export const persistor = persistStore(store);

export default store;

metro.config.js：

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          alias: {
            src: './src',
            screens: './src/screens',
            redux: './src/assets/images',
            assets: './assets',
          },
        },
      ],
    ],
  };
};

Answer 1

问题在于您的babel.config.js 文件。我猜你从别处复制并粘贴了一些代码，但不明白它的含义。

redux: './src/assets/images',

这里的这一行告诉编译器redux 模块的位置是./src/assets/images。它将在该文件夹中查找不存在的redux 源代码，而不是默认位置./node_modules/redux。

你不想这样，所以删除那行。