ネイティブ壁紙のチュートリアル

6260 ワード
react reactnative tutorial javascript テキストリンク
もしあなたがネイティブのネイティブのモバイルアプリケーションをネイティブと一緒に構築しようとした場合は、簡単に、私は興味があるかもしれません.特に、あなたが画面をパーソナライズするユニークな方法を探しているなら、私はあなたがこのページの正しいトラックにいることを認めなければなりません.この記事は、それがコンセプトを完了すると記載されている他のリンクを伴って、あなたが好きなようにその機能を変更できるように、特定の壁紙アプリを作成することによって完全なガイドです.
この壁紙アプリは、引き出し、検索機能だけでなく、コミュニティの別のタブを探索し、お気に入り(最初の画像は、色の形の中)、ほぼAndroidとIOSの両方に似て探しています.あなたはsource code here on GitHub、役に立つかもしれません.また、初心者で、ビデオチュートリアルでより快適に感じるならば、私のチャンネルの上でYouTubeビデオのこのシリーズはあなたのために準備されます.

私たちはエキスポ、nativebase、bluestacks、unsplashのようないくつかのウェブサイトなどのいくつかのツールを使用します.COMとReactnative.dev.どのようにインストールして適用するかについてもっと知る必要があるなら、ここであなたはそれを見つけることができます.
OK!アプリを紹介してプロジェクトを開始しましょう.簡単な形でホームページを含むjs
import React from 'react';
import HomePage from './src/HomePage';

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

render() {

    return (
        <HomePage />
        );
     } 
  }
一方、ホームページコンポーネントには、3つのタブを持つヘッダーと、検索アイコンと、画像1として好きなタブがあります.だから、ここは私たちの国です.
state = {
        favorites: [],
        isExploreLoading: false,
        searchBar: false,
        query: ''
    }
を介して我々のお気に入りの写真をクリックして“お気に入り”の配列に追加されます.「ISExploreloading」と「SearchBar」はアプリケーションの一部をレンダリングします、そして、「Query」はイメージ名をタイプすることによって検索機能を提供するために定義されます.
次に、nativebaseから選択したヘッダをインポートし、ホームページを作成します.
render() {

        return (
            <Container>
                <Header hasTabs searchBar={this.state.searchBar} >
                 …
                             </Header>
                <Tabs >
                 …
                 </Tabs>
            </Container >
        );
    }
1 -検索バー
次の写真が示すように、検索バーには、検索アイコン、入力、および透明なボタンの中の「閉じる」アイコンが保持されます.

それで、検索をクリックするための「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によると、コンテナの中のヘッダーの下に3つのタブがあります.
<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;
他の2つのコンポーネントは、上記のコードに自分の名前を代入することによって生成されます.
おめでとう!あなたは、上記のようにあなたの特定のアプリの最初の部分を終えました.
このアプリはまた、メニュー、コミュニティが含まれ、お気に入りのタブを次の写真として達成する必要があります


あなたは、このアプリを終了するに興味がある場合は、ここに私のウェブサイト、または上のビデオのこのreact native beginner tutorialの完全な記事にご参加ください.私は元の詳細指向の記事を書いて、あなたのプログラミングスキルを向上させるために、後者の1つのビデオの包括的なシリーズを作成しました.あなたがそれらを役に立つことを願っています.
筆記試験アルゴリズムの王ハンマーボーナス問題(JS)
レプリカ