React Native Elements 및 Expo를 사용한 복제 틴더

이 튜토리얼은 반응 기본 요소와 엑스포를 사용하여 틴더 클론을 구축하여 모바일 용 픽셀-완벽한 레이아웃을 만드는 데 중점을 둡니다. 우리는 홈, 최고 선택, 프로필 및 메시지의 네 가지 주요 화면을 구성합니다.

주요 기능 :

간소화 된 크로스 플랫폼 스타일 (Android, iOS, Web)에 대한 반응 기본 요소 활용. 단순화 된 프로젝트 설정 및 실행을 위해 엑스포 활용

React Navigation을 사용하여 사용자 정의 탐색 및 탭 표시 줄 구현. 틴더 스타일 카드 스 와이프에

를 사용하는 원사와 효율적으로 자산 및 종속성 관리

전제 조건 : 기본 반응 기본 및 엑스포 지식이 가정됩니다. 원사 및 설치와 함께 모바일 장치 또는 시뮬레이터의 엑스포 클라이언트가 필요합니다. 이 자습서는 노드 11.14.0, NPM 6.4.1, 원사 1.15.2 및 엑스포 2.16.1 (필요에 따라 업데이트)을 사용합니다. 프로젝트 설정 :

새로운 엑스포 프로젝트 생성 : ( "탭"템플릿 선택). 의 종속성 설치 :

• 반응 네이티브 요소 통합 :
반응 기본 요소를 설치하십시오 :
UI 건축 :
튜토리얼은 다음을 포함하여 각 화면의 생성을 자세히 설명합니다
react-native-deck-swiper
홈 화면 :
는 스 와이프 가능한 카드 ( 구성 요소)를 사용합니다. 더미 데이터는

상단 선택 화면 : 's 구성 요소를 사용하여 프로필 카드의 스크롤 가능한 그리드를 표시합니다.

메시지 화면 : expo-cli는 's

구성 요소를 사용하여 메시지 목록을 제시합니다. <.>

프로파일 화면 : 는 이미지, 세부 사항 및 소셜 미디어 링크가있는 사용자 프로필을 보여줍니다.

구성 요소 및 사용자 정의 스타일을 사용합니다

1. 튜토리얼은 설명 및 스타일 세부 사항과 함께 각 화면에 대한 코드 스 니펫을 제공합니다. Github 저장소에서 필요한 자산 이미지를 포함해야합니다. expo init expo-tinder
탐색 설정 :
2. 튜토리얼은 기본 탭 탐색 ()을 수정하여 4 개의 화면을 포함하고 사용자 정의 구성 요소를 사용하여 아이콘을 사용자 정의하고 를 사용하여 기본 헤더를 제거합니다. 는 장치 안전 영역 내에서 적절한 렌더링을 보장하는 데 사용됩니다.

   전체 코드는 Github에서 사용할 수 있습니다. 이 자습서는 UI 사용자 정의, 기능 추가, 파이어베이스 통합, 배포, 성능 최적화, 보안, 수익 창출, 데이터 처리, 테스트 및 업데이트를 다루는 FAQ로 마무리됩니다.

위 내용은 React Native Elements 및 Expo를 사용한 복제 틴더의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!