React-native с проблемой сборника рассказов react-native-vector-icons и react-native-paper

введите описание изображения здесь

Мы разрабатываем компонент в react-native, который использует react-native-paper, поскольку он также работает с web, мы хотели использовать storybook, чтобы иметь возможность создавать базовые примеры, которые также можно протестировать в браузере.

Но проблема заключается в следующих ошибках, которые зависят не от нас, а от библиотек, которые мы используем.

Как вы можете видеть ниже ошибки, кажется, что компонент загружен с данными.

Кто-то знает, как помочь нам понять, в чем именно заключается ошибка (а также как ее решить), а также связавшись с указанными модулями для их исправления.

"dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.1",
    "react-native-paper": "^4.5.0",
    "react-native-vector-icons": "^7.1.0",
    "react-native-web": "^0.13.4",
    "styled-components": "^5.1.1"
  }

comment
Какую ОС вы используете?   -  person Leri Gogsadze    schedule 20.12.2020
comment
@LeriGogsadze: Я использую mac os, как вы думаете, это проблема с ОС?   -  person Paul    schedule 20.12.2020
comment
Вы вставили Fonts папку в XCode?   -  person Leri Gogsadze    schedule 20.12.2020
comment
@LeriGogsadze: Не уверен, что понимаю, на ios это работает: i.stack.imgur.com/l1PVR .png Ниже вы можете увидеть элементы управления сборника рассказов, они не работают в браузере.   -  person Paul    schedule 20.12.2020


Ответы (1)


Наткнулся на ту же проблему; Я делаю компоненты, которые будут работать как с react-dom, так и с react-native (используя react-native-web). Я также использую Storybook для изолированного тестирования / разработки компонентов.

У меня сработало решение, описанное здесь.

Насколько я понимаю, проблема связана с плагином @babel/plugin-proposal-class-properties не включается во время компиляции.

Я получил следующее .storybook/webpack.config.js; поскольку решение, которое я связал, было немного неверно отформатировано.

const path = require('path')

module.exports = async ({config, mode}) => {
  config.module.rules.push({
    test: /\.(js|jsx|ts|tsx)$/,
    loader: 'babel-loader',
    include: path.resolve(__dirname, '../node_modules/'),
    options: {
      presets: [
        "@babel/env",
        "@babel/preset-react",
        "module:metro-react-native-babel-preset",
      ],
      plugins: [
        "react-native-web",
        "@babel/plugin-proposal-class-properties"
      ]
    }
  })

  config.module.rules.push({
    test: /\.ttf$/,
    loader: 'url-loader',
    include: path.resolve(__dirname, '../node_modules/react-native-vector-icons/Fontisto.js')
  })

  config.resolve.alias = {
    'react-native': 'react-native-web'
  }

  return config
}

PS Я использовал проблема этого человека, чтобы получить рекомендованную установку для Интернета работает. Мой .storybook/preview.js выглядит примерно так:

... (export parameters, export globalTypes, etc..)

// ==
import Fontisto from '../node_modules/react-native-vector-icons/Fontisto'
import iconFont from '../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf'

const iconFontStyle =`
  @font-face {
    src: url(${iconFont});
    font-family: Fontisto;
  }
`

const style = document.createElement('style')
style.type = 'text/css'
if (style.styleSheet) {
  style.styleSheet.cssText = iconFontStyle
} else {
  style.appendChild(document.createTextNode(iconFontStyle))
}
document.head.appendChild(style)
//

Надеюсь, все получится!

PPS Извините, я считаю, что стоит упомянуть, что я не уверен, что эту конфигурацию Babel лучше поместить в .storybook/main.js в соответствии с рекомендациями Storybook.js. Мне не удалось заставить этот метод работать; и не мог найти никаких примеров того, как бы я это сделал; мое вышеупомянутое решение появилось первым.

person Ryan Lockard    schedule 22.12.2020
comment
Я заблудился, я не мог понять, как это исправить. Я использую следующий шаблон: github.com/ugglr/react-native-storybook-boilerplate - person Paul; 23.12.2020
comment
@Paul Извини, надеюсь, я не слишком много помог в этом лол; Мне придется пометить этот шаблон, спасибо, я не смог заставить Styled-Components работать для того, что мне было нужно, так что, возможно, это поможет. К сожалению, это не TS; Я думаю, что именно отсюда и возникли мои проблемы. - person Ryan Lockard; 24.12.2020
comment
Так ты говоришь мне, что все было наоборот, может я тебе помог? ;) - person Paul; 25.12.2020