React Native 레이아웃으로 시작하십시오

이 튜토리얼을 사용하면 React Native Application의 레이아웃을 설계하고 스태킹, 그리드 레이아웃 및 절대 레이아웃을 포함하여 응용 프로그램에서 일반적으로 사용되는 레이아웃을 구현하는 방법을 안내합니다. React Native 앱의 기본 스타일과 CSS를 사용하는 방법을 이미 알고 있다고 가정하므로 Flatgrid 요소에 대해 너무 많이 설명하지 않을 것입니다.

직접 가져올 수 있으며 간식을 사용하는 경우 Expo가 설치할 것인지 묻습니다. 그렇지 않으면 다음 명령으로 설치할 수 있습니다.

파일에서 라이브러리를 가져 와서 다른 구성 요소를 추출하십시오.

는 파티션이없는 목록을 렌더링하는 데 사용됩니다.

npm install react-native-super-grid

API는 모든 것을 JSX 하위 요소로 취하는 대신 데이터 배열 및 렌더링 방법을 기반으로합니다. 그리드를 작성할 필요는 없지만 데이터를 넣기 때문에 코드를 단순화하는 데 도움이됩니다.

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

import { FlatGrid, SectionGrid } from 'react-native-super-grid';

요약 이 튜토리얼에서는 React Native 앱의 레이아웃을 설계하는 방법을 배웠습니다. 구체적으로, 당신은 반응 원시의 Flexbox를 사용하여 요소를 찾는 방법을 배웠습니다. 또한 React Native Super Grid를 사용하는 방법을 배웠으므로 그리드 구현이 더 쉬워집니다. 모든 레이아웃으로 전체 샘플 코드 및 엑스포 스낵을 볼 수 있습니다. FlatList 다음 자습서에서는 응용 프로그램에서 일반적인 UI 요소 (예 : 캘린더, 목록 및 탭 탐색)를 재현하여 배운 모든 것을 실천합니다. SectionList

이 기사는 Jacob Jackson의 기여로 업데이트되었습니다. Jacob은 웹 개발자, 기술 작가, 프리랜서 및 오픈 소스 기고자입니다.

위 내용은 React Native 레이아웃으로 시작하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!