Livre d'histoires pour React Native

Bonjour les experts, Nous utilisons tous des composants réutilisables dans nos applications OU nous développons des composants personnalisés qui sont fréquemment utilisés à plusieurs endroits et gardons cette logique séparée, donc chaque fois que nous changeons de logique métier, cela le fera se refléter partout où il est utilisé. Que se passe-t-il si je dis : montrez-moi le composant que vous avez développé, vous devez l'importer/l'implémenter dans un composant et exécuter l'application, n'est-ce pas ? Existe-t-il un moyen de voir tous les composants réutilisables au même endroit, de jouer avec, de modifier divers accessoires et de les valider ? Oui, c'est là.

Qu'est-ce qu'un livre d'histoires ?

Storybook permet aux développeurs d'écrire une histoire (composant personnalisé), d'exécuter une histoire, de jouer avec diverses propriétés, de la valider sans exécuter d'application réelle et sans importer dans aucun composant. Storybook simplifie la vie des développeurs, les développeurs peuvent jouer avec toutes les histoires (composants personnalisés) à partir d'un seul endroit, appelé Storybook. Storybook s'intègre aux frameworks d'interface utilisateur JavaScript les plus populaires tels que React, React Native, Angular, Vue et prend en charge un framework de composants rendus par le serveur tel que Ruby on Rails.

Qu'est-ce qu'une histoire ?

L'histoire capture l'état rendu d'un composant d'interface utilisateur. Les développeurs peuvent écrire plusieurs histoires par composant. Les histoires sont écrites au format Component Story Format (CSF), une norme basée sur un module ES6 — pour l'écriture de composants.

Caractéristiques du livre d'histoires —

• Développement de composants isolés

• Fournir des interfaces utilisateur robustes

• Addons pour dynamiser votre flux de travail

• Expérience utilisateur cohérente

• Composants de tests unitaires

• Composant Partager et réutiliser

Installations —

Exécutez cette commande depuis la racine de votre application native React :

npx -p @storybook/cli sb init — tapez réagir_native

Vous serez invité à vous demander si vous souhaitez installer @storybook/react-native-server, vous pouvez choisir en toute sécurité de ne pas l'installer maintenant, car vous pourrez l'ajouter plus tard et ce n'est pas obligatoire.

Exécuter Storybook –

# Starts Storybook in development mode
npm run storybook

Écrire des histoires —

Créer un composant de tâche

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

Créer des 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' }}

Configuration

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

Tout rendre | Histoires spécifiques

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

Modules complémentaires —

Boutons —
npm i — enregistrez @storybook/addon-ondevice-knobs
Permettez aux développeurs d'ajuster les accessoires des composants en temps réel.

Actions —
npm i — enregistrez @storybook/addon-ondevice-actions
Le développeur peut vérifier les appels onPress avec des actions qui enregistreront des informations dans l'onglet Actions.

Remarques —
npm i — enregistrez @storybook/addon-ondevice-notes
Autorisez les développeurs à ajouter des démarques à vos histoires pour aider à documenter leur utilisation.

Contexte —
npm i — enregistrez @storybook/addon-ondevice-backgrounds
Permet au développeur de modifier l'arrière-plan du livre d'histoires pour comparer l'apparence de votre composant avec différents arrière-plans.

Merci d'avoir lu l'article !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!