Buku cerita untuk React Native

Helo Pakar, Kami semua menggunakan Komponen Boleh Diguna Semula dalam aplikasi kami ATAU kami membangunkan komponen tersuai yang kerap digunakan di berbilang tempat dan memastikan logik itu berasingan, jadi apabila kami menukar logik perniagaan ia akan dipantulkan di mana-mana di mana ia digunakan. Apa yang berlaku jika saya katakan tunjukkan kepada saya komponen yang anda bangunkan, anda perlu mengimport/melaksanakannya dalam satu komponen dan menjalankan aplikasi, betul? Adakah terdapat cara saya boleh melihat semua Komponen Boleh Digunakan semula di satu tempat, saya boleh bermain dengannya, menukar pelbagai prop dan mengesahkannya? Ya ada.

Apa itu Buku Cerita?

Buku Cerita membolehkan pembangun menulis Cerita (Komponen Tersuai), Jalankan Cerita, Main dengan pelbagai sifat, Mengesahkannya tanpa menjalankan aplikasi sebenar dan tanpa mengimport dalam mana-mana komponen. Buku cerita menjadikan kehidupan pembangun lebih mudah, pembangun boleh bermain dengan semua Cerita (Komponen Tersuai) dari satu tempat — itu dipanggil Buku Cerita. Buku cerita disepadukan dengan rangka kerja UI JavaScript yang paling popular seperti React, React Native, Angular, Vue dan menyokong rangka kerja komponen yang diberikan pelayan seperti Ruby on Rails.

Apa itu Cerita?

Cerita merakamkan keadaan yang diberikan bagi Komponen UI. Pembangun boleh menulis berbilang cerita bagi setiap komponen. Cerita ditulis dalam Format Cerita Komponen (CSF) standard berasaskan modul ES6 — untuk menulis komponen.

Ciri-ciri Buku Cerita —

• Pembangunan komponen terpencil

• Hantarkan UI yang mantap

• Tambahan untuk menguatkan aliran kerja anda

• Pengalaman pengguna yang konsisten

• Komponen ujian unit

• Kongsi & Guna Semula komponen

Pemasangan —

Laksanakan arahan ini dari dalam akar apl asli bertindak balas anda:

npx -p @storybook/cli sb init — taip react_native

Anda akan digesa bertanya sama ada anda mahu memasang @storybook/react-native-server, anda boleh memilih untuk tidak memasangnya sekarang kerana anda boleh menambahkannya kemudian dan ia tidak diperlukan.

Jalankan Buku Cerita —

# Starts Storybook in development mode
npm run storybook

Menulis Cerita -

Buat Komponen Tugas

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

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

Tatarajah

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

Render Semua | Cerita Khusus

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

Tambahan -

Tombol —
npm i — simpan @storybook/addon-ondevice-knobs
Benarkan pembangun melaraskan prop komponen dalam masa nyata.

Tindakan —
npm i — simpan @storybook/addon-ondevice-actions
Pembangun boleh mengesahkan panggilan onPress dengan tindakan yang akan log maklumat dalam tab tindakan.

Nota —
npm i — simpan @storybook/addon-ondevice-notes
Benarkan pembangun menambahkan sedikit penurunan nilai pada cerita anda untuk membantu mendokumentasikan penggunaannya.

Latar belakang —
npm i — simpan @storybook/addon-ondevice-backgrounds
Membenarkan pembangun menukar latar belakang buku cerita untuk membandingkan rupa komponen anda dengan latar belakang yang berbeza.

Terima kasih kerana membaca Artikel!

Atas ialah kandungan terperinci Buku cerita untuk React Native. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!