React Native(Expo) + NativeBase 환경에서 Storybook v6(CSF3.0) 가져오기
17119 단어 React NativeStorybooktech
Storybook을 React Native 환경으로 가져올 때 공식 튜토리얼에 설명된 절차에 따라 진행하면 이전 버전이 설치됩니다.
2022년 3월까지 최신 스토리북은 6.4 계열이지만, 다음 명령을 실행해 도입한 스토리북은 5.3 계열이다.
npx -p @storybook/cli sb init --type react_native
+ "@storybook/addon-actions": "^5.3",
+ "@storybook/addon-knobs": "^5.3",
+ "@storybook/addon-links": "^5.3",
+ "@storybook/addon-ondevice-actions": "^5.3.23",
+ "@storybook/addon-ondevice-knobs": "^5.3.25",
+ "@storybook/react-native": "^5.3.25",
+ "@storybook/react-native-server": "^5.3.23",
React Native CSF3 에서도0의 은혜를 받고 싶어서 본 기사의 순서대로 설정해 봤기 때문에 기사에 남는다.
본고의 환경 정보
집필할 때의 README.md의 React Native v6학과 4의 데모 등이 기재되지 않아 공식적인 지원 상황에 의문이 있으므로 주의사항을 바탕으로 도입 등을 판단해달라
react를 대상으로 sb init 지정하기
목표는
react_native가 아니라react이다.npx -p @storybook/cli sb init --type react
main.덮어쓰기 js
다시 쓰기 자동으로 생성된
.storybook/main.js.module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
],
framework: '@storybook/react',
// https://zenn.dev/himorishige/scraps/8cca98dc9120d2
webpackFinal: (config) => {
config.resolve.alias = {
'react-native$': 'react-native-web',
};
// https://github.com/react-native-svg/react-native-svg/issues/1553#issuecomment-1011487502
config.resolve.extensions.unshift('.web.js');
return config;
},
};
webpackFinal의 항목이 중점이다.react-native-web 사용
주석에 기재된 Scrap을 참고해 사용
react-native의 모든 곳을 Aliasreact-native-web로 설정해 웹팩이 해결하도록 했다.이런 행동을 할 수 있다는 게 리액트 네이티브의 본색을 발휘하는 거죠.
※ 만일의 경우를 대비해 이런 방법을 취할 때 스토리북에서 현지인의 독특한 행동을 확인하는 것은 불가능할 수 있으니 양해 부탁드립니다
react-native svg 오류 제거
다음은
config.resolve.extensions.unshift('.web.js');에 관한 부분이다.여기를 설정하지 않으면 다음과 같은 오류가 발생합니다.NativeBase 구성 요소를 사용하는 Story가 없으면 오류가 발생하지 않을 수 있습니다.
ModuleParseError: Module parse failed: Unexpected token (18:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const AssetSourceResolver = require('./AssetSourceResolver');
|
> import type {ResolvedAssetSource} from './AssetSourceResolver';
|
| let _customSourceTransformer, _serverURL, _scriptURL;
NativeBaseProvider 설정
NativeBase가 포함된 어셈블리의 경우 Provider 패키지가 필요하므로
.storybook/preview.js는 다음과 같습니다.import { NativeBaseProvider } from 'native-base';
import { theme } from '~/utils/themes/NativeBase';
import React from 'react';
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};
const withThemeProvider = (Story, context) => {
return (
<NativeBaseProvider theme={theme}>
<Story {...context} />
</NativeBaseProvider>
);
};
export const decorators = [withThemeProvider];
이전 설정 이후
yarn storybook 실행한 후, NativeBase의 Buttton 구성 요소를 사용하는 구성 요소를 Story로 열 수 있습니다.
보태다
V7 설정 정보
공식 문서를 보면 다음 대형 업데이트를 위한 V7을 위한 피처 플라그가 나왔으니 앞으로 가져올 분들은 일찍 도전하실 수 있습니다.
Babel 정보
베벨 설정을 맞춤형으로 만들 필요가 있다고 생각했는데 그게 아니었어요.
CSF3.정보
Story는 다음과 같이 안전하고 간단하게 작성할 수 있습니다.편하네.제목은 기본적으로 디렉터리 구조를 반영합니다.
import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
import ActionButton from '~/components/ui/button/ActionButton';
import Colors from '~/utils/themes/Colors';
export default {
component: ActionButton,
} as ComponentMeta<typeof ActionButton>;
export const Primary: ComponentStoryObj<typeof ActionButton> = {
args: {
size: 'md',
children: '送信する',
},
};
Storybook은 언제 활용하고 싶은지 정기적으로 주목하고 특히 CSF3에 주목한다.0의 쓰기 방식이 편리해졌고 최근에도 msw와testing-Library와 포인트를 매길 수 있어 전방 개발에서 당연한 개발 절차에 포함될 수 있는 도구로 진화되었는가?초보자로서 나는 이렇게 생각한다.
활용 등에 대한 설명이 있으면 연락 주세요!
참고 문헌
Reference
이 문제에 관하여(React Native(Expo) + NativeBase 환경에서 Storybook v6(CSF3.0) 가져오기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/meijin/articles/react-native-expo-storybook-csf3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
