Storybook für React Native

Hallo Experten, wir alle verwenden wiederverwendbare Komponenten in unseren Anwendungen ODER wir entwickeln benutzerdefinierte Komponenten, die häufig an mehreren Stellen verwendet werden, und halten diese Logik getrennt, sodass dies bei jeder Änderung der Geschäftslogik der Fall ist sich überall dort widerspiegeln, wo es verwendet wird. Was passiert, wenn ich sage: Zeigen Sie mir die Komponente, die Sie entwickelt haben. Sie müssen sie in eine Komponente importieren/implementieren und die Anwendung ausführen, richtig? Gibt es eine Möglichkeit, alle wiederverwendbaren Komponenten an einem Ort zu sehen, damit zu spielen, verschiedene Requisiten zu ändern und sie zu validieren? Ja, es ist da.

Was ist ein Bilderbuch?

Storybook ermöglicht es Entwicklern, eine Story (benutzerdefinierte Komponente) zu schreiben, eine Story auszuführen, mit verschiedenen Eigenschaften zu spielen und sie zu validieren, ohne die eigentliche Anwendung auszuführen und ohne eine Komponente zu importieren. Storybook macht das Entwicklerleben einfacher, Entwickler können mit allen Storys (benutzerdefinierten Komponenten) von einem Ort aus spielen – das nennt sich Storybook. Storybook lässt sich in die gängigsten JavaScript-UI-Frameworks wie React, React Native, Angular, Vue integrieren und unterstützt ein servergerendertes Komponenten-Framework wie Ruby on Rails.

Was ist eine Geschichte?

Story erfasst den gerenderten Zustand einer UI-Komponente. Entwickler können mehrere Geschichten pro Komponente schreiben. Geschichten werden im Component Story Format (CSF) geschrieben, einem auf ES6-Modulen basierenden Standard – zum Schreiben von Komponenten.

Storybook-Funktionen –

• Isolierte Komponentenentwicklung

• Bereitstellung robuster Benutzeroberflächen

• Add-ons zur Beschleunigung Ihres Workflows

• Konsistente Benutzererfahrung

• Komponenten des Komponententests

• Komponente teilen und wiederverwenden

Installationen —

Führen Sie diesen Befehl im Stammverzeichnis Ihrer nativen React-App aus:

npx -p @storybook/cli sb init – geben Sie „react_native“ ein

Sie werden gefragt, ob Sie @storybook/react-native-server installieren möchten. Sie können dies jetzt getrost nicht installieren, da Sie es später hinzufügen können und es nicht erforderlich ist.

Storybook ausführen –

# Starts Storybook in development mode
npm run storybook

Geschichten schreiben –

Aufgabenkomponente erstellen

// 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 erstellen

// 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' }}

Konfiguration

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

Alle rendern | Spezifische Geschichten

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

AddOns —

Knöpfe —
npm i – @storybook/addon-ondevice-knobs speichern
Ermöglichen Sie Entwicklern, Komponenten-Requisiten in Echtzeit anzupassen.

Aktionen —
npm i – @storybook/addon-ondevice-actions speichern
Entwickler können onPress-Aufrufe mit Aktionen überprüfen, die Informationen auf der Registerkarte „Aktionen“ protokollieren.

Notizen —
npm i – @storybook/addon-ondevice-notes speichern
Ermöglichen Sie Entwicklern, Ihren Storys einen Preisnachlass hinzuzufügen, um deren Verwendung zu dokumentieren.

Hintergrund —
npm i – @storybook/addon-ondevice-backgrounds speichern
Ermöglicht Entwicklern, den Hintergrund des Storybooks zu ändern, um das Aussehen Ihrer Komponente mit verschiedenen Hintergründen zu vergleichen.

Vielen Dank für das Lesen des Artikels!

Das obige ist der detaillierte Inhalt vonStorybook für React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!