有没有办法在多个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文件夹移动到两个应用程序的父目录中，然后以这种方式导入主题模块。

两种方式（symlink和父目录）均出现以下错误：

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>
       );
}
...

直接从1月11日@joerneu的评论粘贴的rn-cli.config.js ： 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之后，它的工作效率<3

我可能会回去整理一下。 也许只能将这些内容合并到一个不错的模块中，并删除进入目录的步骤之一。