Есть ли способ использовать одну базовую тему для нескольких реагирующих приложений? - PullRequest
Новая
       18

Есть ли способ использовать одну базовую тему для нескольких реагирующих приложений?

0 голосов
/ 12 февраля 2019

Я работаю над проектом, который имеет один бэкэнд и несколько интерфейсных приложений в react-native.

Я хотел бы использовать одну тему для всех этих react-native приложений, чтобы сохранитьБрендинг / etc на точку.

Кто-нибудь нашел способ сделать это?

Я пробовал символическую ссылку из одного приложения в папку 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 для нескольких приложений, чтобы обеспечить согласованность тем во всех приложениях.

1 Ответ

0 голосов
/ 13 февраля 2019

Я смог решить эту проблему благодаря удивительным людям в этой теме: https://github.com/facebook/metro/issues/1#issuecomment-462981541

Эта ссылка должна идти прямо к моему сообщению о том, как я решил эту проблему.

Iопубликует вставку ниже, если вы не хотите переходить к теме проблемы, хотя некоторые другие публикации в этой теме определенно хорошо понимают.

@ 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"
}

In my-app s 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 от 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, и она заработала <3 </p>

Я, вероятно, вернусь и немного ее почистю.может просто объединить их в один красивый модуль и удалить один из шагов вниз в каталог.

...