첫 번째 React 네이티브 응용 프로그램을

개발자들의 머릿속에 떠오르는 두 가지 흔히 볼 수 있는 문제는 그들이 어떻게 새로운 응용 프로그램을 정확하게 설계하는지, 그리고 어떻게 선택한 기술 창고에서 시작하는지이다.따라서 React Native Starter를 사용하여 새로운 모바일 응용 프로그램을 만드는 방법과 디자인 모델을 확인하고 주요 코드가 깨끗하고 확장될 수 있도록 하는 방법을 정확하게 이해할 것입니다.

React Native Starter란 무엇입니까?

우선 React Native Starter에 대한 정보가 있습니다.응용 프로그램을 만드는 사람은 일반적으로 같은 오래된 문제에 직면하게 된다.이것은 선택할 적당한 기술 창고, 내비게이션을 정확하게 추가하는 방법, 응용 프로그램 데이터를 관리하는 방법을 알아야 하는 것 등을 포함한다. 개발자는 평균 40여 시간만 들여 구조를 파악할 수 있다.이것은 심지어 응용 프로그램 구성 요소나 정확한 페이지도 포함하지 않는다.
React Native Starter를 사용하면 개발자의 응용 프로그램 프로젝트에 확장적이고 다기능적이며 강력한 시작 도구 패키지를 제공하여 이러한 문제를 해결합니다.이 패키지는 데이터 관리에 사용되는 Redux 통합, 화면 변환 등을 제공하는react 내비게이션을 포함하기 때문에 당신의 팀은 최대 2만 달러를 절약할 수 있습니다.

React Native Starter를 사용하여 새로운 애플리케이션 프로젝트 시작

필요한 사전 요구 사항:

이 강좌를 사용하려면 React 및 JavaScript를 알아야 합니다.이전에 React를 사용하지 않았더라도 따라갈 수 있습니다.이 강의에서는 React의 기본 개념을 학습합니다.
개발 도구를 선택합니다.모든 플랫폼과 편집기의 조합을 사용할 수 있다.하지만 다음 사항부터 시작하는 것이 좋습니다.

Visual Studio 코드: 기존 최상의 편집기의 예입니다.

React-Native-Tools for VSCode: Visual Studio 코드에 사용되는 플러그인으로React-Native 개발에 사용되며 사용자에게 유용한 단축키를 제공하고 VSCode 환경에서 직접 코드를 디버깅할 수 있습니다.

Reactotron: React Native와 React를 검사하는 데스크톱 프로그램입니다.js 프로젝트.
iOS 응용 프로그램이 필요한 경우 XCode도 설치해야 합니다.

당신의 프로젝트를 시작합니다

만약 당신이 워드프레스 블로그의 이동 형식을 만들고 싶고 RNS를 사용하고 싶다고 가정해 보세요.
React Native Starter는 다음 목록에서 선택할 수 있는 여러 가지 주제를 제공합니다.

이 주제들이 만들어졌을 때, 제작진은 가능한 한 많은 시장의 용량을 포위하려고 시도하고 있었다.RNS에 포함된 모든 유형의 설계 추세를 확인할 수 있습니다.새로운 블로그 프로그램을 만들고 싶을 때, 어두운 버전에서 선택해야 한다.다음은 이 화면의 예입니다.

우선, RNS 코드를 복제하고 재구매로 전환해야 합니다.

git clone https://github.com/flatlogic/react-native-starter-full.git
cd react-native-starter-full

처음에 React Native Starter는 기본 테마를 제공했지만 어두운 테마를 선택해야 합니다.문서에서 다음 명령을 실행하여 주제를 변경하면 됩니다.

$THEME_NAME=dark bash ./change-theme.sh

그리고 너의 응용 프로그램은 어두워졌다.그러면 포함된 모든 화면에 어떻게 표시됩니까?보려면 다음 두 개의 콘솔 명령을 실행합니다.

yarn install
yarn run:ios

구축이 끝날 때까지 기다려야만 시뮬레이터에서 응용 프로그램을 볼 수 있습니다.이것은 준비된 초기 응용 프로그램입니다.

미세 조정 항목

다음에 방금 만든 프로그램을 프로그램 형식에 맞게 미세하게 조정해야 합니다.우선, 응용 프로그램에 어떤 페이지가 필요한지 확인해야 합니다.만든 블로그의 페이지 목록은 다음과 같습니다.

로그인 화면.

물품 명세서.

한 편의 문장 페이지.

프로필 페이지.

각 페이지가 RNS에 포함되므로 지정된 템플릿을 변경합니다.네가 해야 할 일은 내비게이션을 바꾸는 것이다.현재 내비게이션 페이지 (src/modules/navigation/MainTabNavigator.js) 를 열면 내비게이션에 무엇이 포함되어 있는지, 모든 페이지가 무엇을 사용하고 있는지 알 수 있습니다.

그러나 네비게이터 탭에는 게시물 목록 하나와 개요 페이지 두 페이지만 필요합니다.그래서 우리는 이렇게 그것을 바꿀 수 있다.

현재 탭 탐색기에는 두 개의 화면이 있습니다.그 다음에 두 개의 추가 화면 (로그인과 발표 화면) 이 있어야 합니다. 최고급 내비게이터를 변경해야 합니다. (src/modules/navigation/RootNavigation.js): 그리고 내비게이션이 완성됩니다.필요한 모든 스크린이 거기에 있습니다.

다음 단계

응용 프로그램의 목표가 무엇이든지 후속 조작은 더욱 정확하지만, RNS가 매우 유연하기 때문에, 당신은 이 조작을 신속하게 완성할 수 있으며, 너무 많은 번거로움을 겪지 않을 것입니다.모듈 컨테이너의 코드를 변경하여 RNS를 블로그 끝에 연결하기만 하면 됩니다.

결론

보시다시피 React Native Starter를 사용하여 새로운 응용 프로그램을 시작하는 것은 매우 간단합니다.너는 60분도 안 되는 시간 안에 정확한 응용 프로그램을 위해 샘플 코드를 개발할 수 있을 뿐만 아니라, 디자인에 많은 업무나 고급 지식이 필요하지 않다.이것이 바로 React Native Starter가 새로운 모바일 응용 프로그램 프로젝트를 시작하는 데 있어서 가장 중요한 이유입니다!
다음 글도 좋아할 수 있습니다.
최초는 flatlogic.com-React, Angular, Vue, Bootstrap & React 본체 템플릿과 주제에 발표되었다.
텍스트 출처: How to Make Your First React Native App