React Native를 위한 스토리북-JS 튜토리얼-php.cn

React Native를 위한 스토리북

Mary-Kate Olsen

풀어 주다： 2024-09-25 06:24:31

원래의

611명이 탐색했습니다.

Storybook for React Native

안녕하세요 전문가 여러분, 우리는 모두 애플리케이션에서 재사용 가능한 구성 요소를 사용하거나 여러 장소에서 자주 사용되는 사용자 정의 구성 요소를 개발하고 해당 논리를 별도로 유지하므로 비즈니스 논리가 변경될 때마다 사용되는 모든 곳에 반영됩니다. 개발한 컴포넌트를 보여달라고 하면 이를 하나의 컴포넌트로 가져오거나 구현하고 애플리케이션을 실행해야 합니다. 맞나요? 모든 재사용 가능한 구성 요소를 한 곳에서 볼 수 있고, 가지고 놀고, 다양한 소품을 변경하고 유효성을 검사할 수 있는 방법이 있나요? 네, 거기 있어요.

스토리북이란 무엇인가요?

Storybook을 사용하면 개발자는 Story(Custom Component)를 작성하고, Story를 실행하고, 다양한 속성으로 플레이하고, 실제 애플리케이션을 실행하지 않고 컴포넌트를 가져오지 않고도 유효성을 검사할 수 있습니다. Storybook은 개발자의 삶을 더욱 단순하게 만들어 주며, 개발자는 Storybook이라는 한 곳에서 모든 Story(Custom Component)를 가지고 놀 수 있습니다. Storybook은 React, React Native, Angular, Vue 등 가장 널리 사용되는 JavaScript UI 프레임워크와 통합되며 Ruby on Rails와 같은 서버 렌더링 구성 요소 프레임워크를 지원합니다.

스토리란 무엇입니까?

스토리는 UI 구성요소의 렌더링된 상태를 캡처합니다. 개발자는 구성 요소당 여러 스토리를 작성할 수 있습니다. 스토리는 구성 요소 작성을 위한 ES6 모듈 기반 표준인 CSF(Component Story Format)로 작성됩니다.

스토리북 기능 —

분리형 부품 개발
강력한 UI 제공
작업 흐름을 강화하는 애드온
일관적인 사용자 경험
단위 테스트 구성요소
구성요소 공유 및 재사용

설치 —

React 네이티브 앱의 루트 내에서 다음 명령을 실행하세요.

npx -p @storybook/cli sb init — 반응_네이티브 입력

@storybook/react-native-server를 설치할 것인지 묻는 메시지가 표시됩니다. 나중에 추가할 수 있고 필수 사항이 아니므로 지금 설치하지 않아도 안전합니다.

스토리북 실행 —

# Starts Storybook in development mode
npm run storybook

로그인 후 복사

이야기 쓰기 —

작업 구성요소 생성

// components/Task.js
import * as React from 'react';
import { TextInput, SafeAreaView } from 'react-native';
import { styles } from '../constants/globalStyles';

export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {
  return (
    <SafeAreaView style={styles.ListItem}>
      <TextInput value={title} editable={false} />
    </SafeAreaView>
  );
}

로그인 후 복사

TaskStories 만들기

// components/Task.stories.js
import * as React from 'react';
import { View } from 'react-native';
import { styles } from '../constants/globalStyles';
import { storiesOf } from '@storybook/react-native';
import { action } from '@storybook/addon-actions';
import Task from './Task';
export const task = {
  id: '1',
  title: 'Test Task',
  state: 'TASK_INBOX',
  updatedAt: new Date(2018, 0, 1, 9, 0),
};

export const actions = {
  onPinTask: action('onPinTask'),
  onArchiveTask: action('onArchiveTask'),
};
storiesOf('Task', module)
  .addDecorator(story => <View style={styles.TaskBox}>{story()}</View>)
  .add('default', () => <Task task={task} {...actions} />)
  .add('pinned', () => <Task task={{ ...task, state: 'TASK_PINNED' }} {...actions} />)
  .add('archived', () => <Task task={{ ...task, state: 'TASK_ARCHIVED' }}

로그인 후 복사

구성

// storybook/index.js
import { getStorybookUI, configure } from '@storybook/react-native';

import './rn-addons';

// import stories
configure(() => {
  require('../components/Task.stories.js');
}, module);

const StorybookUIRoot = getStorybookUI({
  asyncStorage: null,
});

export default StorybookUIRoot;

로그인 후 복사

모두 렌더링 | 구체적인 이야기

import { getStorybookUI, configure } from '@storybook/react-native';
import { name as appName } from './app.json';
import { AppRegistry } from 'react-native';

configure(() => {
  require('./storybook/stories/Button/Button.stories.js'); // render all stories require(‘./storybook/stories’) - which contain all your stories
}, module);

const StorybookUIRoot = getStorybookUI({});

AppRegistry.registerComponent(appName, () => StorybookUIRoot);

로그인 후 복사