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);

애드온 —

손잡이 —
npm i — @storybook/addon-ondevice-knobs 저장
개발자가 실시간으로 구성 요소 소품을 조정할 수 있습니다.

작업 —
npm i — @storybook/addon-ondevice-actions 저장
개발자는 작업 탭에 정보를 기록하는 작업을 통해 onPress 호출을 확인할 수 있습니다.

메모 —
npm i — @storybook/addon-ondevice-notes 저장
개발자가 스토리에 일부 마크다운을 추가하여 사용법을 문서화할 수 있도록 허용하세요.

배경 —
npm i — @storybook/addon-ondevice-Backgrounds 저장
개발자는 스토리북의 배경을 변경하여 구성 요소의 모양을 다양한 배경과 비교할 수 있습니다.

기사를 읽어주셔서 감사합니다!

위 내용은 React Native를 위한 스토리북의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!