React Native のストーリーブック-jsチュートリアル-php.cn

React Native のストーリーブック

Mary-Kate Olsen

リリース： 2024-09-25 06:24:31

オリジナル

611 人が閲覧しました

Storybook for React Native

専門家の皆様、私たちは皆、アプリケーションで再利用可能なコンポーネントを使用しているか、複数の場所で頻繁に使用されるカスタムコンポーネントを開発してそのロジックを分離しているので、ビジネスロジックを変更するたびに、使用されているあらゆる場所に反映されます。あなたが開発したコンポーネントを見せてください、と言ったらどうなるでしょうか。それを 1 つのコンポーネントにインポート/実装して、アプリケーションを実行する必要がありますよね?すべての再利用可能なコンポーネントを 1 か所で確認し、遊んだり、さまざまなプロパティを変更したり、検証したりできる方法はありますか?はい、あります。

ストーリーブックとは何ですか?

Storybook を使用すると、開発者は、実際のアプリケーションを実行したり、コンポーネントにインポートしたりせずに、ストーリー (カスタムコンポーネント) を作成し、ストーリーを実行し、さまざまなプロパティで再生し、検証することができます。 Storybook を使用すると、開発者の作業がよりシンプルになり、開発者はすべての Story (カスタムコンポーネント) を 1 か所 (Storybook と呼ばれます) から操作できます。 Storybook は、React、React Native、Angular、Vue などの最も一般的な JavaScript UI フレームワークと統合し、Ruby on Rails などのサーバーでレンダリングされるコンポーネントフレームワークをサポートします。

ストーリーとは何ですか?

ストーリーは、UI コンポーネントのレンダリングされた状態をキャプチャします。開発者はコンポーネントごとに複数のストーリーを作成できます。ストーリーは、コンポーネントを記述するための ES6 モジュールベースの標準であるコンポーネントストーリーフォーマット (CSF) で記述されます。

ストーリーブックの機能 —

分離コンポーネント開発
堅牢な UI を提供
ワークフローを強化するアドオン
一貫したユーザーエクスペリエンス
単体テストのコンポーネント
コンポーネントの共有と再利用

インスタレーション —

反応ネイティブアプリのルート内から次のコマンドを実行します:

npx -p @storybook/cli sb init — タイプreact_native

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

ログイン後にコピー

タスクストーリーを作成する

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

ログイン後にコピー