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： 通过设置index.js键将入口点设置为"main"。

{
  "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： 通过设置platform.js键将入口点设置为"main"。

{
  "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的{{1}}中：

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> ); } ...直接从@joerneu 1月11日的评论中粘贴： https://github.com/facebook/metro/issues/1#issuecomment-453649261

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

rn-cli.config.js

此后$ watchman watch-del-all $ rm -rf node_modules && npm install $ rm -rf /tmp/metro-bundler-cache-* $ rm -rf /temp/haste-map-react-native-packager-*一直有效<3

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

有没有办法在多个react-native应用程序中使用一个基于本机的主题？

1 个答案: