Buku cerita untuk React Native
Sep 25, 2024 am 06:24 AMHelo 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!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Ganti aksara rentetan dalam javascript

jQuery mendapatkan padding/margin elemen

HTTP Debugging dengan Node dan HTTP-Console

Tutorial Persediaan API Carian Google Custom
