1단계: React Native with Storybook 설정

This is the first post in a series of setting up a react native UI library development foundation. Please refer to the link collections here for the full series overview.

최종 UI 라이브러리 템플릿을 설정하는 첫 번째 단계에서 새로운 init를 만들고 스토리북을 설치합니다.
만약 네가 이전에 이런 일을 한 적이 있다면, 너는 끝까지 뛰고 싶을 것이다. 거기에 내가 동적으로 이야기를 불러올 수 있는 가방을 설치했다
아, 맞다. 나는 엑스포를 사용하지 않았다...;)
기타 부분
문장
링크
react native & @storybook/react native 설정
너 지금 여기 있어!
설치 프로그램은reactnative 웹과 함께 처음부터 반응합니다
@storybook/react+react-native-web을 병렬 이야기책으로 실행 설정

반응 본기 초기화

reactnative에 전혀 익숙하지 않으면, official react native docs 의 절차에 따라 환경 설정을 하십시오.
초기화

npx react-native init RNStorybook

이것은 당신에게 새로운reactnative 프로젝트를 만들 것입니다.
계속하기 전에 프로젝트의android와 iOS 버전을 실행하여 설치가 성공했는지 확인하십시오.나는 항상 순서에 따라 점진적이기 때문에 일이 고장이 났을 때, 나는 그것이 어디에서 일하고 어디에서 고장났는지 확실하게 안다.
그래서 잊어버린 사람들에게는 이렇게 하라는 명령이 있다.

cd ios && pod install

cd .. 

yarn run ios

또는

yarn run android

환영 화면을 보세요!
안드로이드
네트워크 간 네트워크 운영 체제

스토리북 설치

이 문서에서 권장하는 자동 설정 사용: Storybook quick-start guide
루트 폴더에서 다음 명령을 실행하여 설치를 시작합니다.

npx -p @storybook/cli sb init

react native 서버 accept를 설치할지 여부를 알릴 때.
나중에 코드 편집기를 열면 이야기책의 마지막 단계를 화면에 보여 줍니다.
폴더./storybook 내에서 색인을 엽니다.우리는 우리의 응용 프로그램 이름을 추가할 것이다.수동으로 추가할 수도 있고, 나처럼 게으르게 할 수도 있으며, 루트 폴더 app.json 에서 프로그램 이름을 가져올 수도 있다.프로그램의 이름이 바뀌면 들어가서 수동으로 변경할 필요가 없다는 것이 장점이다.
결과는 다음과 같습니다../storybook/index.js

import {AppRegistry} from 'react-native';
import {getStorybookUI, configure} from '@storybook/react-native';
import {name as appName} from '../app.json';

import './rn-addons';

// import stories
configure(() => {
  require('./stories');
}, module);

// Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({});

// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you can safely remove this line.
AppRegistry.registerComponent(appName, () => StorybookUIRoot);

export default StorybookUIRoot;

Storybook에 응용 프로그램 이름을 추가한 후 루트 폴더에서 index.js 를 엽니다.React Native 응용 프로그램의 기본 포털 포인트입니다../index.js 내에서 모든 내용을 주석하고 다음 줄을 추가합니다.

export { default } from './storybook'

이것은storybook을 응용 프로그램의 첫 번째 항목으로 보여 줍니다. 그러나 잠시 후 옵션 카드의 보기나 다른 종류의 화면에storybook을 보여 주고 싶다면storybook을 다른 구성 요소로 추가하면 됩니다.더 많은 정보는 이야기책 문서를 참고하십시오.
이제 다음 명령을 실행하면 포트 React Native 에서 개발 서버 7007 를 시작할 수 있습니다.

yarn run storybook

다음 화면이 표시됩니다.

서두르지 마세요. "메뉴란은 영원히 불러오는 것을 멈추지 않습니다."라고 말할 수도 있습니다.네가 옳다.이 웹 인터페이스는 iOS나 Android 시뮬레이터에 연결하려고 시도하고 있습니다.
따라서 브라우저 창과 장치를 나란히 배치하려면 다음과 같이 해야 합니다.

이를 사용하면 브라우저 제어 시뮬레이터/시뮬레이터에서 표시할 수 있는 보기를 볼 수 있습니다.좋다!⭐️ 이것은 장치에서 구성 요소 라이브러리를 신속하고 쉽게 탐색할 수 있는 좋은 기능입니다.

동적 스토리 로드 설정

프로젝트가 발전함에 따라, 당신은 기본 상황처럼 수동으로 이야기를 이야기책에 추가하는 것을 원하지 않습니다.이것은 매우 지루합니다. 디버깅 구성 요소가 왜 나타나지 않았는지 시간이 필요합니다.
들어오다 react-native-storybook-loader
나는 이 프로젝트를 정말 좋아한다. 왜냐하면 설정 후에 나는 더 이상 새로운 이야기를 추가할 걱정을 할 필요가 없기 때문이다.

설치 프로그램

설치

yarn add -dev react-native-storybook-loader 

패키지에 스크립트를 추가합니다.json

{
  "scripts": {
    ......
    "prestorybook": "rnstl"
    ......
  }
}

스토리북 구성에 추가./storybook/index.js 을 열고 스토리를 로드하는 항목을 수정합니다../storybook/index.js

import { AppRegistry } from 'react-native'
import { getStorybookUI, configure } from '@storybook/react-native'
import { name as appName } from '../app.json'

import { loadStories } from './storyLoader'

import './rn-addons'

// Add React native storybook loader here!
configure(() => {
  loadStories() // <------------------
}, module)

// Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({})

// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you can safely remove this line.
AppRegistry.registerComponent(appName, () => StorybookUIRoot)

export default StorybookUIRoot

스토리 로더 설정
설정의 마지막 단계react-native-storybook-loader는 어떤 디렉터리에서 이야기를 찾아야 하는지 설정하는 것입니다.
다시 열기 package.json 및 구성 필드 추가:

"config": {
    "react-native-storybook-loader": {
      "searchDir": ["./src/components"],
      "pattern": "**/*.stories.js",
      "outputFile": "./storybook/storyLoader.js"
    }
  }

./src/components 디렉터리의 내부를 보고 싶지 않지만, 다른 폴더에서 볼 수 있도록 설정할 수도 있고, searchDir 그룹에 추가해서 더 많은 위치를 찾을 수 있습니다.다른 필드를 변경한 경우 다른 설정을 변경해야 합니다.

테스트 구성 요소 추가

이 부분의 설정이 유효한지 확인하기 위해서, 모든 것이 정상적으로 작동하도록 테스트 구성 요소를 추가하고 검사합시다.src라는 새 디렉터리를 만들고 디렉터리에 components -> ./src/components라는 폴더를 추가하고 있습니다
이 파일에 TestComponent.js & TestComponent.stories.js라는 두 개의 새 파일을 추가했습니다. 테스트 구성 요소를 작성하고storybook에 이야기를 추가합니다../src/components/TestComponent.js

import React from 'react';
import {View, Text} from 'react-native';

function TestComponent() {
  return (
    <View>
      <Text>Hello from React Native</Text>
    </View>
  );
}

export default TestComponent;

그리고 스토리북 한 권../src/components/TestComponent.stories.js

import React from 'react';
import {storiesOf} from '@storybook/react-native';

import TestComponent from './TestComponent';

storiesOf('Test Component', module).add('example', () => <TestComponent />);

reactnative를 사용할 때 이야기책 storiesOfapi를 사용해야 합니다.

모든 것을 한데 안배하다

선택한 장치에서 테스트를 진행합니다!yarn run iOS이것은 먼저 react-native-storybook-loader 스크립트를 실행합니다.이것은 *.stories.js 내에서 ./src/components 와 일치하는 패턴 ./storybook/storyloader.js 의 모든 파일에 대한 인용을 출력하여 이야기책에 불러옵니다.그 후로 이야기책은 정상적으로 운행되었다.
다음은 여러분이 보셔야 할 내용입니다.

화면에서 테스트 구성 요소를 볼 수 있기를 바랍니다.

성공

우리는 무엇을 완성했습니까?

새로운react 로컬 프로젝트를 시작합니다.

이(가) 설치되었습니다.

이(가) 설치되었습니다.

설치 및 구성@storybook/react-native.

에 우리의 첫 번째 테스트 구성 요소와 이야기가 추가되었습니다.

이 내용을 좋아하신다면 이 시리즈의 초기 게시물을 책갈피로 추가하고 두 번째 부분을 계속 지켜보십시오!
Github에서 전체 시리즈 저장소를 찾을 수 있습니다.react-native-storybook-boilerplate
별을 하나 주거나 질문을 하는 것을 고려하면, PRS가 가장 환영을 받는다!