React Native 的 Storybook 教程

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

设置 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 ios 运行应用程序时，你应该在设备上看到此渲染

使用 yarn storybook:ios 运行 Storybook 时，你应该看到此

工作原理

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

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

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

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

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

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

这使我们能够使用 expo-constants 包在应用程序中访问 storybookEnabled 变量，我们用它来确定是渲染 Storybook 还是应用程序。

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）上都能正常工作。

{
  "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 而不是我们的应用程序。

提交更改

在此阶段，可以将我们的文件安全地添加到本地存储库。运行以下命令以初始化本地存储库，添加并提交我们迄今为止所做的更改。

git init

接着

git add .

然后

git commit -m "first commit"

最后

git branch -M main

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