New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,072
Back to Intro to Storybook
Chapters
  • Introdução
  • Componente Simples
  • Componente Composto
  • Dados
  • Conclusão
  • Contribuir

Tutorial de Storybook para React Native

Configurando o Storybook em seu ambiente de desenvolvimento

O Storybook ajuda você a criar componentes de interface do usuário isolados da lógica de negócios e do contexto do seu aplicativo. Esta edição do tutorial Introdução ao Storybook é para React Native; existem outras edições para ReactVueAngularSvelte e Ember.

Storybook e seu aplicativo

Configurar o Storybook no React Native

Precisamos seguir alguns passos para começar. Neste tutorial, usaremos este template onde já configuramos um aplicativo React Native usando o Expo e adicionamos o Storybook ao projeto.

Antes de prosseguir-mos, alguns tópicos importantes que temos que ter em mente:

  • Para ajudá-lo ao longo do tutorial, você precisará de um telefone ou simulador previamente configurado para permitir a execução do aplicativo. Para obter mais informações, consulte a documentação do Expo para configurar iOS e Android.
  • Este tutorial será focado em iOS/Android. O React Native pode ter como alvo outras plataformas que este tutorial não cobrirá.
  • Você precisará do Node.js configurado no seu ambiente de desenvolvimento.

Comece por fazer o download do template que criámos para este tutorial:

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

Em seguida, vamos instalar as dependências e executar o aplicativo para garantir que tudo esteja funcionando conforme o esperado.

Copy
cd taskbox
yarn install

Agora que você tem o aplicativo, vamos executá-lo para garantir que tudo esteja funcionando conforme o esperado.

Você pode escolher ios ou android e executar qualquer um deles e verificar se o aplicativo está funcionando.


# 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

💡 Ao longo desta versão do tutorial, vai ser usado o Yarn para executar a maioria dos comandos. Se estiveres a seguir este tutorial e não tiveres o Yarn configurado, podes substituir os comandos para o teu gestor de pacotes preferido (por exemplo, npm, pnpm).

Ao executar o aplicativo com yarn ios, você deve ver isso renderizado no dispositivo:

expo starter screen

Ao executar o Storybook com yarn storybook:ios, você deve ver isto:

Storybook UI

Como funciona

Á partida, quando inicializado, o template fornece toda a configuração necessária para que possamos começar a desenvolver a nossa aplicação com React Native. No entanto, antes de começarmos a desenvolver o nosso IU do zero, vamos ver como funciona o Storybook dentro de um aplicativo React Native e o que há de diferente.

Com o React Native, o Storybook é um componente que você pode renderizar no seu aplicativo, ao contrário de outras versões do Storybook, onde você pode executar o Storybook como um aplicativo separado de forma independente.

Por causa dessa distinção, precisamos de uma maneira de alternar entre o aplicativo e o Storybook. Para fazer isso, usamos variáveis ​​de ambiente e veremos isso rapidamente agora.

💡 Consulte a documentação do Expo para obter mais detalhes sobre como usar variáveis ​​de ambiente.

No nosso projeto existe um arquivo de configuração para Expo chamado app.config.js, este arquivo é onde configuramos coisas como o nome do nosso aplicativo e constantes que podemos usar em todo o aplicativo.

E é aqui que configuramos a variável storybookEnabled com o valor obtido da variável de ambiente STORYBOOK_ENABLED, que veremos em breve como fazer.

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

Isso nos permite acessar a variável storybookEnabled em nosso aplicativo usando a biblioteca expo-constants e usamos isso para determinar se renderizamos o Storybook ou seu aplicativo.

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

Podemos verificar no nosso ficheiro package.json que temos alguns scripts novos vindos do Storybook. Estes scripts são usados para passar os valores da variável de ambiente para a aplicação, que vai ser usada para determinar se o Storybook deve ser renderizado ou não. Tudo isto usando a biblioteca cross-env para garantir que as variáveis de ambiente funcionam em todos os sistemas operativos (Windows, MacOS, Linux).

Copy
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"
  }
}

É aqui que nossa variável de ambiente STORYBOOK_ENABLED é definida como true, o que informa nosso aplicativo para renderizar o Storybook em vez da nossa aplicação.

💡 Existem outras maneiras de configurar o Storybook, esta é apenas a maneira mais simples de começar.

Confirmar alterações

Nesta fase, é seguro adicionar nossos arquivos a um repositório local. Execute os seguintes comandos para inicializar um repositório local, adicionar e confirmar as alterações que fizemos até agora.

Copy
git init

Seguido por:

Copy
git add .

E em seguida:

Copy
git commit -m "first commit"

Finalmente:

Copy
git branch -M main

Vamos começar a construir nosso primeiro componente!

Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Componente Simples
Crie um componente simples isoladamente
✍️ Edit on GitHub – PRs welcome!
Join the community
6,507 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI