초보자를 위한 React 기본 배경화면 앱 튜토리얼

6423 단어 reactreactnativetutorialjavascript
React Native로 네이티브 모바일 앱을 구축해 본 적이 있다면 저처럼 쉽고 흥미로울 것입니다. 특히 화면을 개인화하는 고유한 방법을 찾고 있다면 이 페이지에서 올바른 길을 가고 있음을 인정해야 합니다. 개념을 완성하는 여기에서 언급된 다른 링크와 함께 제공되는 이 문서는 원하는 대로 기능을 수정할 수 있는 특정 배경화면 앱을 만드는 방법을 안내하는 완벽한 가이드입니다.



이 배경화면 앱에는 서랍, 검색 기능은 물론 커뮤니티, 탐색 및 즐겨찾기의 다양한 탭(첫 번째 사진, 색상 도형 내부)이 있으며 Android와 iOS에서 거의 비슷하게 보입니다. source code here on GitHub 이 유용할 수 있습니다. 또한 초보자이고 비디오 자습서가 더 편하다면 내 채널의 이 YouTube 비디오 시리즈가 바로 준비되어 있습니다.



Expo, NativeBase, BlueStacks와 같은 일부 도구와 unsplash.com 및 reactnative.dev와 같은 일부 웹사이트를 사용할 것입니다. 설치 및 적용 방법에 대해 자세히 알아야 하는 경우 여기에서 찾을 수 있습니다.

확인! 간단한 형식으로 homePage를 포함하는 App.js를 도입하여 프로젝트를 시작하겠습니다.

import React from 'react';
import HomePage from './src/HomePage';

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }

render() {

    return (
        <HomePage />
        );
     } 
  }

반면에 homePage 구성 요소에는 세 개의 탭이 있는 헤더와 검색 아이콘, 그림 1과 같은 즐겨찾기 탭이 있습니다. 따라서 상태는 다음과 같습니다.

state = {
        favorites: [],
        isExploreLoading: false,
        searchBar: false,
        query: ''
    }

클릭하면 좋아하는 사진이 "즐겨찾기"배열에 추가됩니다. "isExploreLoading"및 "searchBar"는 응용 프로그램의 일부를 렌더링하고 "query"는 이미지 이름을 입력하여 검색 기능을 제공하도록 정의됩니다.

이제 NativeBase에서 선택한 헤더를 가져오고 homePage를 다음과 같이 만듭니다. (코드 내부의 ...는 단계별로 완료됩니다.)

render() {

        return (
            <Container>
                <Header hasTabs searchBar={this.state.searchBar} >
                 …
                             </Header>
                <Tabs >
                 …
                 </Tabs>
            </Container >
        );
    }

1- 검색창:
다음 그림에서 볼 수 있듯이 searchBar에는 검색 아이콘, 입력 및 투명 버튼 내부의 "닫기"아이콘이 있습니다.



따라서 검색을 클릭하기 위한 "if 조건"은 다음과 같습니다.

{this.state.searchBar ?
                        <>
                            <Item>
                                <Icon name="ios-search" />
                                <Input placeholder="Search" onChangeText={this.onQueryChange} />
                                <Button transparent onPress={() => this.onSearchClick()}>
                                    <Icon name="close" />
                                </Button>
                            </Item>
                            <Button transparent>
                                <Text>Search</Text>
                            </Button>

                        </> :

여기서 렌더링 외부의 "onQueryChange"및 "onSearchClick"기능을 사용하면 이름으로 이미지를 검색할 수 있습니다.

onQueryChange = (query) => {
        this.setState({ query })
    }

onSearchClick = () => {
        this.setState(state => ({ searchBar: !state.searchBar, query: '' }))
    }

그림 1과 같이 왼쪽에 메뉴 아이콘, "내 배경 화면 앱"메뉴 옆에 제목, 검색을 클릭하지 않은 경우 오른쪽에 검색 아이콘이 있습니다. 그래서:

                        <>
                            <Left>
                                <Button transparent onPress={() => this.props.openDrawer()}>
                                    <Icon name='menu' />
                                </Button>
                            </Left>
                            <Body>
                                <Title>My Wallpaper App</Title>

                            </Body>
                            <Right>

                                <Button transparent onPress={() => this.onSearchClick()}>

                                    <Icon name='search' />
                                </Button>
                            </Right>
                        </>
                    }

2- 탭:
그림 1에 따르면 컨테이너 내부의 헤더 바로 아래에 세 개의 탭이 있습니다.

<Tabs >

     <Tab heading={<TabHeading><Text>Community</Text></TabHeading>}>
          <CommunityTab />
     </Tab>

     <Tab heading={<TabHeading><Text>Explore</Text></TabHeading>}>
          <ExploreTab />
     </Tab>

     <Tab heading={<TabHeading><Text>Favorites</Text></TabHeading>}>
          <FavoritesTab />
     </Tab>
</Tabs>

깔끔한 코드를 만들기 위해 각 탭을 홈페이지 구성 요소로 가져온 특정 구성 요소로 만드는 것을 선호합니다. 지금은 이러한 구성 요소를 간단한 형식으로 정의하고 다음 부분에서 완성할 것입니다.

import React, { Component } from "react";
import {Text} from "react-native";


class CommunityTab extends Component {
    state = {};

    render() {
        <Text>Community Tab </Text>;
    }
}
export default CommunityTab;

위의 코드에서 해당 이름을 대체하여 두 개의 다른 구성 요소가 생성됩니다.

축하해요! 위와 같이 간단하게 특정 앱의 첫 번째 부분을 완료했습니다.
이 앱에는 다음 그림과 같이 수행해야 하는 메뉴, 커뮤니티, 탐색 및 즐겨찾기 탭도 포함되어 있습니다.



이 앱을 완성하는 데 관심이 있다면 여기 내 웹사이트에서 이 전체 기사react native beginner tutorial 또는 비디오 시리즈에 참여하십시오. 나는 전자에 대한 자세한 기사를 썼고 프로그래밍 기술을 향상시키는 데 도움이 되는 후자에 대한 포괄적인 비디오 시리즈를 만들었습니다. 유용하게 사용하시길 바랍니다.
.stop 전파 방지 ≠ Vue.js❏
고성능 웹 사이트 구축 비법 (3) - 브라우저 캐시

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage