React Native 프로젝트 구조화

안녕!

이 문서는 THT 프로젝트 전체에서 따르는 코딩 규칙에 대해 설명합니다. Here은 프로젝트를 시작하는 데 사용한 저장소입니다.

참고: 2019년에 좋은 프로젝트 구조를 찾기 위해 구글링을 했고 this 하나를 찾았습니다. 아래 정보는 해당 기사에서 영감을 받았습니다.

우리의 모바일 프로젝트는 주로 React Native, TypeScript 및 Firebase로 구축됩니다. 찾을 수 있는 다음 명령을 사용하여 생성됩니다here.
npx react-native init MyApp --template react-native-template-typescript
우리는 항상 다음 라이브러리를 활용합니다.

react-native-keyboard-aware-scroll-view

프로젝트 구조

  - android/
  - assets/
  - ios/
  - src/
    - api/
    - components/
      - text/
        - Header.tsx
        - HeaderTwo.tsx
        - HeaderThree.tsx
        - Body.tsx
        - Title.tsx
        - Subtitle.tsx
    - navigation/
      - main/
        - index.ts
      - onboarding/
        - index.ts
      - RootNavigator.tsx
    - screens/
      - onboarding/
        - Splash.tsx
        - Loading.tsx
        - Login.tsx
        - SignUp.tsx
        - ForgetPassword.tsx
      - messages/
        - MessagesList.tsx
        - Chat.tsx
      - profile/
    - services/
      - Lessons.ts
      - Students.ts
      - Instructors.ts
    - store/
      - userSlice.ts
      - lessonsSlice.ts
      - store.ts
      - types.ts
    - styles/
      - colors.ts
      - fonts.ts
      - forms.ts
      - utils.ts
      - index.ts
    - utils/
      - formatters.ts
      - icons.tsx

프로젝트 구조 설명

자산/

프로젝트 전체에서 사용되는 정적/자리 표시자 이미지/아이콘/비디오

소스/API/

CRUD 작업 및 REST API 호출과 같은 서비스 계층 기능

소스/구성 요소/

일반적으로 사용되는 버튼, 입력, 모달, 텍스트, 유틸리티 구성 요소 등

이러한 구성 요소는 redux 저장소에 액세스할 수 있으며 stateless 구성 요소일 필요가 없습니다

.

응용 프로그램 전체에서 text/ 구성 요소를 사용하면 일관된 테마를 유지하고 반복되는 많은 스타일을 제거하는 데 도움이 됩니다.

src/탐색/

대부분의 프로젝트는 React 탐색과 함께 탭 탐색을 사용합니다. 각 탭은 x개의 화면으로 구성된 스택 탐색기로 구성됩니다.

경우에 따라 화면 자체가 스택이므로 중첩된 스택 탐색기가 있을 수 있습니다.

소스/화면/

여기에 있는 하위 폴더는 종종 src/navigation/하위 폴더와 구조가 동일합니다.

예를 들어, src/navigation/폴더에 3개의 하위 폴더인 home, messaging 및 profile(탭을 나타낼 수 있음)이 있는 경우 동일한 하위 폴더가 src/screens/내에서 발견되는 것이 안전합니다. 폴더.

이러한 폴더 내에서 탐색 스택과 관련된 모든 구성 요소/페이지/화면을 찾을 수 있습니다.

경우에 따라 응용 프로그램 전체에서 모달이 반복되지 않는 경우 여기에서 모달을 찾을 수 있습니다.

소스/서비스/

src/api/폴더 내에서 찾을 수 있는 createDocument, updateDocument 등과 같은 데이터베이스 로직을 추상화하는 기능. 이러한 함수는 src/api에서 CRUD 함수를 호출하는 startLesson, createUser 등과 같은 것일 수 있습니다.

소스/스토어/

redux 저장소를 업데이트하기 위한 Redux 관련 로직입니다.

작업 중인 각 데이터 조각에 대해 새 조각을 만듭니다.

예를 들어 clientSlice.ts , usersSlice.ts , gamesSlice.ts , currentGameSlice.ts 등이 있습니다.

구성요소 구조

모든 구성 요소는 기능적 구성 요소 구조를 따르고 동일한 파일 내에 스타일을 포함합니다. 글자간격, 줄간격 등을 주의해주세요.

import {Colors, Fonts, Utils} from './styles'

type Props = {
  myProp: string;
};

const MyComponent = (props: Props) => {
  // Note that props is unwrapped so that we can use myProp instead of props.myProp
  const {myProp} = props;

  return (
    <Text style={styles.myText}>{myProp}</Text>
  );
}

const styles = StyleSheet.create({
  myText: {
    color: Colors.Blue,
    fontSize: Fonts.large
    maxWidth: Utils.DEVICE_WIDTH / 2,
  },
});

폐쇄

이것이 RN 공간에서 막 시작하는 사람들에게 도움이 되기를 바랍니다. 다시 한 번, 위의 많은 내용은 Osifo의 읽기this 게시물을 기반으로 합니다.

추신 Twitch 월-금에서 React Native 개발(및 THT의 일상적인 작업)을 스트리밍합니다.

즐거운 코딩하세요!