react native template

---

기본 템플릿을 반응합니다

이 프로젝트는 국가 관리, 국제화, 데이터 페치, 내비게이션 및 재사용 가능한 구성 요소와 같은 필수 기능을 제공하여 개발을 가속화하도록 설계된 React Native 템플릿입니다.

스크린 샷

프로젝트에 제공된 기본 구성 요소를 사용하여 생성되었습니다.

환영 화면

로그인 화면

등록 화면

프로필 화면

특징

• ? 국제화 (I18N)

  • 원활한 현지화를 위해 react-i18next 사용한 다중 언어 지원.

• redux와의 주 관리

  • 효율적인 글로벌 주 액세스 및 업데이트를위한 중앙 상태 관리.

• ? React Query를 사용한 데이터 가져 오기

  • 최적화 된 데이터 가져 오기, 캐싱 및 동기화.

• ? 항해

  • VStack 및 HStack 과 같은 기본 구성 요소를 사용하여 부드럽고 직관적 인 react-navigation .

• ⚛️ 구성 요소 기반 아키텍처

  • 재사용 가능한 UI 구성 요소 및 일관된 스타일이있는 모듈 식 디자인.

• ? 일반적인 유틸리티

  • 간소화 된 개발을위한 도우미 기능 및 유틸리티.

• ? Axios 관리

  • 구성 가능한 API는 내장 오류 처리 및 응답 관리와 함께 Axios를 사용하여 요청합니다.

• WebSocket Management

  • WebSockets를 사용한 실시간 커뮤니케이션 지원.

• ? 쿠키 관리

  • 인증 및 사용자 세션을위한 쿠키 관리를 단순화했습니다.

• 입증

  • 보안 토큰 관리를 통한 사용자 인증 및 등록.

구성 요소

이 프로젝트에는 사용자 인터페이스 구축을위한 재사용 가능한 구성 요소 세트가 포함되어 있습니다.

• 버튼 구성 요소

  • button.tsx : 사용자 정의 가능한 스타일이있는 표준 버튼 구성 요소.

• 타이포그래피 구성 요소

  • h1.tsx , h2.tsx : 일관된 타이포그래피를위한 제목 구성 요소.
  • text.tsx : 컨텐츠 표시를위한 사용자 정의 가능한 텍스트 구성 요소.

• 입력 구성 요소

  • input.tsx : 기본 입력 필드 구성 요소.
  • input-with-icon.tsx : 사용자 상호 작용을 향상시키기위한 아이콘이있는 입력 필드.

• 레이아웃 구성 요소

  • vstack.tsx : 요소를 세로로 배열하기위한 수직 스택 레이아웃.
  • hstack.tsx : 요소를 가로로 배열하기위한 수평 스택 레이아웃.
  • spacer.tsx : 요소 사이에 유연한 공간을 추가하기위한 스페이서 구성 요소.

• 내비게이션 구성 요소

  • navbar.tsx : 앱 헤더 용 사용자 정의 가능한 네비게이션 바.

• 이미지 구성 요소

  • image.tsx : 캐싱 지원이있는 이미지를 표시하기위한 이미지 구성 요소.

• 유틸리티 구성 요소

  • separator.tsx : 내용 분리를위한 분배기 구성 요소.
  • separator-with-text.tsx : 향상된 UI를위한 텍스트가있는 분배기.
  • switch.tsx : 부울 입력을위한 스위치 구성 요소 토글.

• 인덱스 파일

  • index.ts : 구성 요소의 중앙 내보내기 파일.

시작하기

전제 조건

다음을 설치했는지 확인하십시오.

• node.js (v14 이상)
• 방사
• Android / iOS 개발 용 Android Studio / Xcode

설치

1. 저장소 복제 :

   git clone [email protected]:ToniDarodda/react-native-template.git
   cd ReactNativeTemplate

2. 종속성 설치 :

   yarn install

3. 환경 변수 구성 :

   구성 설정으로 루트 디렉토리에서 .env 파일을 업데이트하십시오.

   API_URL= ' https://your-api-url.com '
   SOCKET_URL= ' https://your-socket-url.com '

응용 프로그램 실행

1. 메트로 번들러를 시작하십시오 :

   yarn start

2. Android에서 응용 프로그램 실행 :

   yarn android

3. iOS에서 응용 프로그램을 실행하십시오.

   yarn ios

4. 응용 프로그램 액세스 :

   앱은 에뮬레이터 또는 장치에서 사용할 수 있습니다.

? 테스트

테스트를 실행하려면 다음 명령을 사용하십시오.

yarn test 

스크립트

• ? 더 예쁘게 사용하는 형식 코드 : yarn format
• ? application 대담추 애플리케이션 시작 : yarn start
• ? : 개발 모드에서 시작 : yarn android 또는 yarn ios
• ? eslint : yarn lint 사용하여 코드를 보풀로 묶습니다
• ? 테스트 실행 : yarn test
• 엔드 투 엔드 테스트 실행 : yarn test:e2e

특허

라이센스가 없습니다. 당신은 그것을 자유롭게 사용할 수 있습니다.

? 작가

Toni da Rodda

아이콘

• 전개
• 구성
• ? 선적 서류 비치
• ? 유지
• 보안
• ? 이메일 통합
• ? 성능 최적화
• ⚡ 시간을 얻습니다

---

문제를 제출하거나 요청을 당겨이 프로젝트에 자유롭게 기여하십시오.

질문이나 지원은 Toni Da Rodda에 문의하십시오.

---