有没有办法在多个 react-native 应用程序中使用一个原生主题？

Question

我正在开发一个项目，该项目在react-native 中有一个后端和多个前端应用程序。

我想在所有这些react-native 应用程序中使用一个主题来保持品牌/等重点。

有没有人找到办法做到这一点？

我尝试了从一个应用程序到另一个应用程序的 native-base-theme 文件夹的符号链接，但没有成功。

我正在为应用程序使用 Expo，在挖掘了一些问题线程后发现 Metro bundler 不遵循符号链接？ https://github.com/facebook/react-native/issues/18725#issuecomment-380268250

我还尝试将 native-base-theme 文件夹移动到两个应用程序的父目录并以这种方式导入主题模块。

两种方式（符号链接和父目录）都给出了这些错误：

Unable to resolve module './native-base-theme/components' from '/Users/me/workspace/my-app/App.js'
The module './native-base-theme/components' could not be found from '/Users/me/workspace/my-app/App.js'
Indeed, none of these files exist:
    '/Users/me/workspace/my-app/native-base-theme/components(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
    '/Users/me/workspace/my-app/native-base-theme/components/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)

/Users/me/workspace/my-app/native-base-theme/components/index.js 确实存在那里。

带符号链接：

import getTheme from './native-base-theme/components';
import platform from './native-base-theme/variables/platform';

与父目录：

import getTheme from '../native-base-theme/components';
import platform from '../native-base-theme/variables/platform';

也只是为了它而尝试：

import getTheme from '../native-base-theme/components/index';

和

import getTheme from '../native-base-theme/components/index.js';
import platform from '../native-base-theme/variables/platform.js';

根据文档，在使用 node node_modules/native-base/ejectTheme.js 弹出本机基础主题后，我正在导入相同的工作方式

我希望（希望？）为多个应用使用一个 native-base-theme 文件夹，以保持所有应用的主题一致。

Answer 1

感谢这个问题线程中的优秀人员，我能够解决这个问题： https://github.com/facebook/metro/issues/1#issuecomment-462981541

该链接应该直接指向我如何解决此问题的帖子。

如果您不想导航到问题线程，我将在下面发布粘贴，尽管该线程中的其他一些帖子绝对是很好的见解。

---

@th317erd 我能够让它工作！万分感谢！

观察者也像魅力一样工作！当我更改主题文件夹中的任何内容时，expo 应用程序将重新加载到我的手机上 ? 非常棒。

我的结构如下所示（只显示重要文件）： my-app/ 和 themes/ 在同一个目录中。

/User/me/workspace/my-project/
      |
      +--my-app/
            |
            +-- App.js
            +-- package.json
            +-- rn-cli-config.js
            +-- (etc project files)
      |
      +--themes/
            |
            +-- native-base-theme
                  |
                  +-- components
                        |
                        +-- index.js (compiles everything to one export)
                        +-- package.json (created with 'npm init')
                  |
                  +-- variables
                        |
                        +-- platform.js (exports theme variables I am using/modifying)
                        +-- package.json (created with 'npm init')

themes/native-base-theme/components/package.json: 通过设置"main" 键将入口点设置为index.js。

{
  "name": "custom-theme-components",
  "version": "1.0.0",
  "description": "custom-theme-components",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

themes/native-base-theme/variables/package.json: 通过设置"main" 键将入口点设置为platform.js。

{
  "name": "custom-theme-variables",
  "version": "1.0.0",
  "description": "custom-theme-variables",
  "main": "platform.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

在my-app 的package.json：

    "dependencies": {
        ...
        "custom-theme-components": "file:../themes/native-base-theme/components",
        "custom-theme-variables": "file:../themes/native-base-theme/variables",
    },

App.js:

import getTheme from 'custom-theme-components';
import variables from 'custom-theme-variables'
...
   render() {
      return (
         <Root>
           <StyleProvider style={getTheme(variables)}>
             <AppContainer />
           </StyleProvider>
         </Root>
       );
}
...

rn-cli.config.js 直接粘贴自 @joerneu 1 月 11 日的评论： https://github.com/facebook/metro/issues/1#issuecomment-453649261

然后我必须为 Haste 模块常见错误执行四个步骤，然后才能正确编译：

$ watchman watch-del-all
$ rm -rf node_modules && npm install
$ rm -rf /tmp/metro-bundler-cache-*
$ rm -rf /temp/haste-map-react-native-packager-*

在那之后$ expo start 它工作了

我可能会回去清理一下。可能只是能够将它们组合到一个不错的模块中，然后将其中一个步骤删除到目录中。