返回Storybook 简介

React Native 版 Storybook 教程

在您的开发环境中设置 Storybook
此社区翻译尚未更新至最新版本的 Storybook。请帮助我们将英语指南中的更改应用到此翻译中,以更新它。 欢迎提交 Pull Request.

Storybook 帮助您构建与应用程序的业务逻辑和上下文隔离的 UI 组件。此版本的 Storybook 简介教程适用于 React Native;其他版本适用于 React、 Vue、 Angular、 Svelte 和 Ember

Storybook and your app

设置 React Native Storybook

我们需要遵循几个步骤才能开始。在本教程中,我们将使用此模板,其中我们已经使用 Expo 设置了一个 React Native 应用程序,并向项目中添加了 Storybook

在我们开始之前,有一些事项我们需要考虑

  • 为了在整个教程中帮助您,您需要一部手机或模拟器,并已配置好以允许您运行应用程序。有关更多信息,请参阅 Expo 文档中关于在 IOS 上运行Android 的内容。
  • 本教程将重点介绍 iOS/Android。React Native 可以面向本教程未涵盖的其他平台。
  • 您还需要在您的机器上配置 Node.js

首先下载我们为本教程创建的模板。

复制
npx degit chromaui/intro-storybook-react-native-template#main taskbox

接下来,让我们安装依赖项并运行应用程序,以确保一切正常运行。

复制
cd taskbox
yarn install

现在您已经有了应用程序,让我们运行它以确保一切正常运行。

您可以选择 ios 或 android 并运行其中任何一个,并确保应用程序正在工作。


# Run the application on iOS
yarn ios

# Run the application on Android
yarn android

# Run Storybook on iOS
yarn storybook:ios

# Run Storybook on Android
yarn storybook:android

💡 在本教程中,将使用 Yarn。如果您正在学习本教程,但没有配置它,您可以轻松地切换命令以匹配您选择的包管理器(例如,npmpnpm)。

当使用 yarn ios 运行应用程序时,您应该在设备上看到此渲染结果

expo starter screen

当使用 yarn storybook:ios 运行 Storybook 时,您应该看到这个

Storybook UI

工作原理

初始化后,模板已经提供了所需的配置,以帮助我们开始使用 React Native 开发应用程序。在我们开始从头构建 UI 之前,让我们花点时间看看 Storybook 在 React Native 应用程序内部是如何运作的,以及有什么不同。

React Native 中的 Storybook 是一个可以在您的应用程序中渲染的组件,而不是其他框架版本中 Storybook 独立运行的情况。

由于这种区别,我们需要一种在应用程序和 Storybook 之间切换的方法。为此,我们使用环境变量,我们现在将快速介绍一下。

💡 有关如何使用环境变量的更多详细信息,请参阅 Expo 文档

在我们的项目中,有一个名为 app.config.js 的 Expo 配置文件,此文件是我们配置应用程序名称和常量等内容的地方,这些常量可以在整个应用程序中使用。

在此文件中,我们将 storybookEnabled 常量设置为环境变量 STORYBOOK_ENABLED 的值,我们稍后将对此进行介绍。

复制
app.config.js
export default ({ config }) => ({
  ...config,
  name: 'Storybook Tutorial Template',
  slug: 'storybook-tutorial-template',
  extra: {
    storybookEnabled: process.env.STORYBOOK_ENABLED,
  },
});

这使我们可以在应用程序中使用 expo-constants 包访问 storybookEnabled 变量,我们使用它来确定是渲染 Storybook 还是您的应用程序。

复制
App.js
import Constants from 'expo-constants';

function App() {
  // ... removed for brevity
}

// Default to rendering your app
let AppEntryPoint = App;

// Render Storybook if storybookEnabled is true
if (Constants.expoConfig.extra.storybookEnabled === 'true') {
  AppEntryPoint = require('./.storybook').default;
}

export default AppEntryPoint;

package.json 文件中,我们看到了一些新的 Storybook 脚本。我们使用这些脚本将环境变量传递给我们的应用程序,这会使用 cross-env 交换到 Storybook UI 的入口点,以确保这在所有平台(Windows/macOS/Linux)上都能工作。

复制
package.json
{
  "scripts": {
    "storybook": "cross-env STORYBOOK_ENABLED='true' expo start",
    "storybook:ios": "cross-env STORYBOOK_ENABLED='true' expo ios",
    "storybook:android": "cross-env STORYBOOK_ENABLED='true' expo android"
  }
}

这是我们的 STORYBOOK_ENABLED 环境变量设置为 true 的地方,然后它告诉我们的应用程序渲染 Storybook 而不是我们的应用程序。

💡 还有其他配置 Storybook 的方法,这只是最简单的入门方法。

提交更改

在此阶段,将我们的文件添加到本地存储库是安全的。运行以下命令来初始化本地存储库,添加并提交我们目前所做的更改。

复制
git init

然后

复制
git add .

接着

复制
git commit -m "first commit"

最后

复制
git branch -M main

让我们开始构建我们的第一个组件!

下一章
简单组件
在隔离环境中构建一个简单组件