Storybook for React Native 翻訳

以下は、React NativeにStorybookを導入する方法について説明したページの翻訳です。

Storybook for React Native

React NativeのStorybookを使用すると、アプリを実行せずに個々のReact Nativeコンポーネントを設計および開発できます。

このREADMEはバージョン6.5用です。5.3のREADMEはこちらをご覧ください。

Storybookについての詳細は、公式サイトをご覧ください。

注: @storybook/react-nativeは最低でも6.5.14が必要です。他のstorybookパッケージ（@storybook/addonsなど）も^6.5.14またはそれ以降に設定してください。

v6+に関連するオープンな問題を見るには、プロジェクトボードをチェックしてみてください。

# NPMを使用する場合
npx create-expo-app --template expo-template-storybook AwesomeStorybook
 
# Yarnを使用する場合
yarn create expo-app --template expo-template-storybook AwesomeStorybook
 
# pnpmを使用する場合
pnpm create expo-app --template expo-template-storybook AwesomeStorybook

React Native CLIを使用する場合、以下のテンプレートを使用できます。

npx react-native init MyApp --template react-native-template-storybook

既存のプロジェクト

initを実行して、すべての依存関係と設定ファイルをプロジェクトにセットアップします。

npx sb@latest init --type react_native

あとは、アプリのエントリーポイント（App.jsなど）でStorybookのUIを返すだけです。

export { default } from './.storybook';

Storybookとアプリを簡単に切り替えられるようにする方法については、[このブログ記事](https://blog.expo.io/adding-storybook-integration-to-your-expo-projects-7fb

3c8)をご覧ください。

すべてを自分で追加したい場合は、こちらのマニュアルガイドをご覧ください。

追加のステップ: Metro設定の更新

sbmodernリゾルバーフィールドを使用して、Storybookパッケージのモダンバージョンを解決します。これにより、共通のJSモジュールに出荷されるポリフィルが削除され、Promiseが解決されないバグなど、長期間存在する問題が解決されます。

Expo

まず、まだ作成していない場合は、Metro設定ファイルを作成します。

npx expo customize metro.config.js

次に、sbmodernをresolver.resolverMainFieldsリストの先頭に追加します。

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
 
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.resolverMainFields.unshift('sbmodern');
module.exports = defaultConfig;

React Native

module.exports = {
 /* existing config */
 resolver: {
 resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],
 },
};

ストーリーの作成

v6では、以下のようなCSF構文を使用できます。

import { MyButton } from './Button';
 
export default {
 title: 'components/MyButton',
 component: MyButton,
};
 
export const Basic = (args) => <MyButton {...args} />;
 
Basic.args = {
 text: 'Hello World',
 color: 'purple',
};

ストーリーファイルへのパスは、.storybookフォルダのmain.js設定ファイルで設定する必要があります。

// .storybook/main.js
module.exports = {
 stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
 addons: [],
};

デコレータとパラメータ

ストーリーには、デフォルトのエクスポートまたは特定のストーリーにデコレータとパラメータを追加できます。

export default {
 title: 'Button',
 component: Button,
 decorators: [
 (Story) => (
 <View style= alignItems: 'center', justifyContent: 'center', flex: 1 >
 <Story />
 </View>
 ),
 ],
 parameters: {
 backgrounds: {
 values: [
 { name: 'red', value: '#f00' },
 { name: 'green', value: '#0f0' },
 { name: 'blue', value: '#00f' },
 ],
 },
 },
};

グローバルなデコレータとパラメータを追加するには、.storybookフォルダ内のpreview.jsに追加できます。

// .storybook/preview.js
import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
 
export const decorators = [
 withBackgrounds,
 (Story) => (
 <View style={{ flex
 
1, alignItems: 'center', justifyContent: 'center' }}>
 <Story />
 </View>
 ),
];
 
export const parameters = {
 backgrounds: {
 default: 'light',
 values: [
 { name: 'light', value: '#fff' },
 { name: 'dark', value: '#000' },
 ],
 },
};

アドオン

Storybookには多くのアドオンがあります。それらの一部はReact Nativeで動作しますが、すべてが動作するわけではありません。アドオンがReact Nativeで動作するかどうかを確認するには、アドオンのドキュメントを確認してください。

アドオンを追加するには、.storybook/main.jsに追加します。

// .storybook/main.js
module.exports = {
 stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
 addons: ['@storybook/addon-ondevice-actions', '@storybook/addon-ondevice-backgrounds'],
};

Storybookの表示/非表示

Storybookとアプリを簡単に切り替えられるようにするには、以下のようにします。

import StorybookUI from './.storybook';
 
const SHOW_STORYBOOK = true;
 
const App = () => {
 if (SHOW_STORYBOOK) {
 return <StorybookUI />;
 }
 // 通常のアプリエントリーポイントを返す
};
 
export default App;

getStorybookUI

getStorybookUI関数は、StorybookのUIを返します。この関数は、.storybook/index.jsで使用されます。

import { getStorybookUI, configure } from '@storybook/react-native';
 
configure(() => {
 // ストーリーファイルをインポートする
}, module);
 
const StorybookUIRoot = getStorybookUI({});
 
export default StorybookUIRoot;

貢献

Storybookはコミュニティによって駆動されています。貢献に興味がある場合は、貢献ガイドをご覧ください。

例

StorybookのReact Nativeの使用例は、examples/nativeをご覧ください。

以上が、React NativeにStorybookを導入する方法の日本語訳です。

sumisonic notes

エクスプローラー

Storybook for React Native 翻訳