为 1 个或多个 React Native 应用程序设置共享组件（在不同的包中）时遇到问题

Question

我在使用 React Native 应用程序时遇到了麻烦。

现在我有这个文件结构：

外文件夹 套餐 ----ReactNativeApp1 --------React Native App的所有标准文件 ----shared（共享组件的文件夹） --------Button.tsx 示例组件。

我运行 npx react-native start 来初始化此文件夹，然后创建了 Button.tsx 文件（来源如下）：

从“react”导入React； 从 'react-native' 导入 { TouchableOpacity, Text };

const Button = ({ text, onPress }) => { 返回 （ {文本} ）； };

导出默认按钮；

我的目标是拥有一个根文件夹、2 个以上代表 React Native 应用程序的内部文件夹，以及一个包含所有应用程序通用代码的共享文件夹。

我里面有一个 App.tsx 文件

ReactNativeApp1/App1

可以正确注册组件并导入按钮：

import React from 'react';
import { View } from 'react-native';
import Button from '../shared/Button';
 
const App1: React.FC = () => {
return (
    <View>
      <Button text="Press Me" onPress={() => console.log('Button pressed!')} />
    </View>
  );
 };
 
export default App1;

但是，每当我尝试运行该应用程序时，都会收到此错误：

错误：错误：无法从 C:\Users\username\VSCode Projects\SampleReactNativeSharedProject\packages\ReactNativeApp1\App.tsx 解析模块 ../shared/Button:

这些文件都不存在：

• ..\shared\Button(.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android. ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
• ..\shared\Button\index(.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|. android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)

1 |从“反应”导入反应；

2 |从 'react-native' 导入 { View };

3 |从 '../shared/Button' 导入按钮；

我尝试了很多事情：

• 创建 2 个以上应用程序和共享组件文件夹
• 常见的故障排除技巧，如清除缓存、打印语句
• 在互联网上搜索“React Native Monorepo”
• 使用ChatGPT生成示例代码
• 观看与此问题相关的 YouTube 视频
• 从 NPM 切换到 Yarn + Yarn 工作区
• 安装共享组件作为 App1（和其他应用程序）的依赖项

但是，无论如何，我似乎都陷入了同样的问题。

我希望将所有项目（在子文件夹中）放在一个根文件夹中，以及一个共享组件子文件夹中。

我非常感谢有关此问题的任何帮助，并很乐意分享更多详细信息。

Answer 1

这是使用 monorepos 时的常见问题。首先，在项目的根目录中创建一个

package.json

并将其配置为使用

yarn

工作区：

package.json

{
  "private": true,
  "workspaces": [
    "ReactNativeApp1",
    "shared"
  ]
}

确保

reactnativeapp1

和

shared

都有自己的 package.json

现在安装依赖项：

yarn

接下来，为 monorepo 的结构配置 Metro 捆绑器

metro.config.js // 这应该位于项目的根目录

const path = require('path');

module.exports = {
  watchFolders: [
    path.resolve(__dirname, 'shared')
  ],
  resolver: {
    extraNodeModules: {
      shared: path.resolve(__dirname, 'shared')
    }
  }
};

此后，在

ReactNativeApp1

内，创建一个metro配置文件来扩展根配置

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg', 'ts', 'tsx']
    },
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer')
    }
  };
})();

现在导入 App.tsx

import React from 'react';
import { View } from 'react-native';
import Button from 'shared/Button'; //  alias shared as in metro.config.js

const App1: React.FC = () => {
  return (
    <View>
      <Button text="Press Me" onPress={() => console.log('Button pressed!')} />
    </View>
  );
};

export default App1;

现在通过重置缓存来启动捆绑器

npx react-native start --reset-cache or yarn start

或者，您可以使用

Nx

工作区，这是维护 monorepo 工作区的常用工具。在这里阅读更多内容：https://nx.dev/recipes/react/react-native