目前社區(qū)上趟章，最好的钾挟，支持React Native的Living Style Guide工具是getstorybook履羞，本文我們就一起來(lái)看看如何用這個(gè)工具構(gòu)建一個(gè)Living Style Guide（以iOS模擬器為例）枣申。
安裝getstorybook嚷缭，步驟非常簡(jiǎn)單饮亏，只需要運(yùn)行命令
npm i getstorybook --save-dev
運(yùn)行g(shù)etstorybook,
getstorybook
該命令會(huì)在項(xiàng)目根目錄下生成一個(gè)新的目錄storybook, 該目錄是一個(gè)完整的，獨(dú)立的React Native應(yīng)用阅爽。
同時(shí)為往項(xiàng)目的package.json的scripts中插入一條命令
"scripts": {
...
"storybook": "storybook start -p 7007",
...
},
初始化getstorybook之后路幸，接下來(lái)就可以啟動(dòng)storybook了
npm run storybook
該命令會(huì)在本地拉起一個(gè)服務(wù)器提供storybook的目錄界面，同時(shí)通過(guò)React Native的Hot Module Replacement特性完成與模擬器上的應(yīng)用的通信优床，把模擬器的當(dāng)前應(yīng)用切換到storybook目錄下的應(yīng)用以及后續(xù)的通過(guò)瀏覽器操作應(yīng)用狀態(tài)都是通過(guò)這個(gè)特性完成劝赔。storybook啟動(dòng)完成之后，你可以通過(guò)http://localhost:7007 訪問(wèn)到該界面胆敞。因?yàn)檫€沒(méi)有啟動(dòng)React Native應(yīng)用着帽，所以目錄界面上沒(méi)有任何內(nèi)容杂伟。接下來(lái)，在新的命令行窗口啟動(dòng)react native應(yīng)用仍翰。
npm run run-ios
該命令會(huì)啟動(dòng)iOS模擬器赫粥，啟動(dòng)好之后，就可以看到如下的界面(注：界面上筆者已經(jīng)添加了多個(gè)UI組件的Demo）
這樣予借，Living Style Guide平臺(tái)就搭建好了越平，接下來(lái)的工作就是不斷在往該平臺(tái)添加UI組件的Demo。
添加UI組件Demo
往storybook中添加Demo非常簡(jiǎn)單灵迫，下面就是一個(gè)關(guān)于SearchPage的Demo：
import React from 'react';
import {storiesOf, action} from '@kadira/react-native-storybook';
import SearchPage from '../../../../src/property/components/searchPage';
storiesOf('Property', module)
.add('SearchPage', () => (
<SearchPage request={{place_name:"London"}} isLoading={false} search={action('Search called')}/>
));
從代碼上看秦叛，只需要簡(jiǎn)單的三步就可以完成一個(gè)Demo：
- import要做Demo的UI組件
- storiesOf定義了一個(gè)組件目錄
- add添加Demo
在構(gòu)建項(xiàng)目的storybook時(shí)，一些可以幫助我們更有效的開(kāi)發(fā)Demo小Tips：
- 盡可能的把目錄結(jié)構(gòu)與源代碼結(jié)構(gòu)保持一致瀑粥，
- 一個(gè)UI組件對(duì)應(yīng)一個(gè)Demo挣跋，保持Demo代碼的獨(dú)立性和靈活性。
- Demo命名以UI組件名加上Demo綴狞换，
- 在組件參數(shù)復(fù)雜的場(chǎng)景下避咆，可以提供一個(gè)fakeData的目錄用于存放重用的UI組件Props數(shù)據(jù)
getstorybook的其它特性
- Decorators: Demo裝飾器，可以把UI Demo放到一個(gè)容器中獲取更加的視覺(jué)效果修噪。
const CenterDecorator = (story) => (
<div style={{ textAlign: "center" }}>
{story()}
</div>
);
storiesOf('Button', module)
.addDecorator(CenterDecorator)
.add('with text', () => (
<Button onClick={action('clicked')}>Hello Button</Button>
));
- Actions:事件記錄器查库，記錄事件發(fā)生時(shí)接收到的數(shù)據(jù)，例子見(jiàn)SearchPageDemo代碼黄琼。
- Links:UI Demo連接器樊销，通過(guò)這個(gè)工具可以把多個(gè)UI Demo串聯(lián)起來(lái)形成一個(gè)User Journey。下例中就把SearchResultsPageDemo和PropertyDetailsPageDemo串聯(lián)了起來(lái)：
import React from 'react';
import {storiesOf, linkTo} from '@kadira/react-native-storybook';
import {properties} from '../fakeData/properties';
import SearchResultsPage from '../../../../src/property/components/searchResultsPage';
storiesOf('Property', module)
.add('SearchResultsPage', () => (
<SearchResultsPage
properties={properties}
rowPressed={linkTo('Property', 'PropertyDetailsPage-1')}/>
));
- specifications和storyshots：測(cè)試工具脏款，開(kāi)發(fā)者甚至可以在storybook中直接完成UI的自動(dòng)化測(cè)試现柠。
因?yàn)閟torybook的addon機(jī)制，使得storybook能夠很容易的擴(kuò)展弛矛，因此，storybook可能支持更多比然，更有趣的特性丈氓，有需要的話，開(kāi)發(fā)者還可以編寫自己的addon强法。
一點(diǎn)遺憾
storybook不支持Hot Reloading万俗，在React Native平臺(tái)上不支持storybook-addon-knobs，這導(dǎo)致在storybook無(wú)法在IDE中修改代碼饮怯，直接查看到結(jié)果闰歪，需要reload界面才能看到最新的修改效果。不過(guò)蓖墅，還好React Native reload界面的速度很快库倘。
