React Native 的故事书

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《React Native 的故事书》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

专家您好，我们都在应用程序中使用可重用组件，或者我们开发了在多个地方经常使用的自定义组件，并将逻辑分开，因此每当我们更改业务逻辑时，它都会在使用它的任何地方反映出来。如果我说向我展示您开发的组件，您需要在一个组件中导入/实现它并运行应用程序，会发生什么，对吗？有什么方法可以让我在一个地方看到所有可重用组件，我可以使用它，更改各种道具并验证它？是的，它就在那里。

什么是故事书？

storybook 允许开发人员编写故事（自定义组件）、运行故事、使用各种属性、验证它，而无需运行实际应用程序，也无需导入任何组件。 storybook 让开发人员的生活变得更加简单，开发人员可以从一个地方使用所有 story（自定义组件）——这就是 storybook。 storybook 与最流行的 javascript ui 框架（如 react、react native、angular、vue）集成，并支持服务器渲染组件框架（如 ruby on rails）。

什么是故事？

story 捕获 ui 组件的渲染状态。开发人员可以为每个组件编写多个故事。故事以组件故事格式 (csf) 编写，这是一种基于 es6 模块的标准，用于编写组件。

故事书特点——

• 独立组件开发

• 提供强大的 ui

• 增强您工作流程的插件

• 一致的用户体验

• 单元测试组件

• 共享和重用组件

安装 —

从 react native 应用程序的根目录中执行此命令：

npx -p @storybook/cli sb init — 输入react_native

系统会提示您询问是否要安装@storybook/react-native-server，您现在可以安全地选择不安装它，因为您可以稍后添加它，而且这不是必需的。

运行故事书 —

# starts storybook in development mode
npm run storybook

写故事——

创建任务组件

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

创建任务故事

// 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 => {story()})
  .add('default', () => )
  .add('pinned', () => )
  .add('archived', () => 



配置


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




渲染全部 |具体故事


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





  
  
  附加组件 —


旋钮 —

npm i — 保存@storybook/addon-ondevice-knobs

允许开发者实时调整组件 props。

行动 —

npm i — 保存@storybook/addon-ondevice-actions

开发人员可以使用将在操作选项卡中记录信息的操作来验证 onpress 调用。

笔记 —

npm i — 保存@storybook/addon-ondevice-notes

允许开发者在您的故事中添加一些 markdown 以帮助记录其使用情况。

背景 —

npm i — 保存@storybook/addon-ondevice-backgrounds

允许开发人员更改故事书的背景，以将组件的外观与不同背景进行比较。

感谢您阅读文章！


          

            
        
到这里，我们也就讲完了《React Native 的故事书》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！