Navesescriptアプリのログイン画面

仕事の最後の3週間以上私たちのキャプテンのためのモバイルアプリケーションを構築するために構築されている.私たちはそれがクロスプラットフォームとしてnativeScriptを選んだ、私は/私たちはAndroid/IOSの両方の個々のアプリを開発する必要はありません意味.nativescriptについてのクールなことは、あなたの“フレーバー”を選択することができます、それはJavascript、TypeScript、Vue、VEEで書かれた入力スクリプト、角、svelte、イオン、反応、私はかなり任意の主要なフロントエンドのフレームワークを意味する.Vueの背景から来たのでVueを選びました.NSと同様に箱から、あなたはテンプレートを使うのを選ぶことができます、そして、私はそれが我々のニーズのために非常に役に立つことがわかったので、引き出し・ナビゲーションを使うほうを選びました、そして、何らかの理由で、私は拡張性を許します.
それで、ns開発のためにあなたの環境を設定することは、それ自身の上で仕事のかなりの価値があります.NativeScript docs あなたの環境を設定するのを助ける最高のチャンスを与える.後にいつでもタイプすることができますあなたのアプリケーションのCLIのセットアップを実行した後tns doctor そして、あなたはまだ正常にあなたのアプリケーションを実行するには何が欠けている見ることができます.公平な警告IOSは比較的単純でした、しかし、アンドロイドは私に若干の問題を与えました.私が言うことができるすべては、見込みが永遠にあなたの好意にあるかもしれません.それで、あなたはあなたが医者コマンドをインストールして、走らせると言います、そして、すべてはグッチですtns platform add <platform> そして、一旦あなたのプラットホーム(s)が加えられるならば、あなたは走らせることができますtns run <platform> しかし、その後、このフラグを忘れないでください.--no-hmr , ホットリロードを許可する.それで、完全なコマンドはそうですtns run ios --no-hmr . だから、あなたはいくつかの時間を実行した場合は、iPhoneまたは計算されたポップアップは、単にコンソールがあなたに指示を見ていない場合は、Googleはあなたの親友になります.


ので、適切にインストールされ、適切に実行される場合は、これはあなたの基本的なnativescript引き出しアプリであり、はい、それは裸と基本的ですが、実際には、すべてのこのボックスを取得すると、私はそれはかなり驚くべきだと思う.私は基本的なビューのいくつかの基本的なビューの基本的なビューを必要としないので、基本的にすべての削除のナビゲーションとAppのコンポーネントを除く.私はまた、私のコンポーネントをより頻繁に整理し、ログインコンポーネントのために私は私が作成し、authフォルダを構築し、ログインを作成することを維持するのが好きです.それの中のVue.場合は、アプリを見てください.Vueは、主なコンポーネントが彼らが証明されたホームが表示されますし、私は私のログインVueとそれを置き換えることになるので、このアプリがロードされる最初のものは、ログイン画面ですが、それ以外の方法を我々は特定のデータを得ることを意味するか?
ログイン画面は何ですか?よく、私はメールのために2つの入力1とパスワードだけでなくボタンを必要とします.それで、私たちが言及するのを忘れた1つのものは、我々が「Vue」を使用しているとしても、我々がまだ特定の構成要素を持っているNSを使用しなければならないということです.また、各“ビュー”またはページのアプリのNSページの要素にラップする必要があります.私も、それが素晴らしく見える主なログイン表示原因に我々のロゴを加えることに決めました.私はちょうど私たちのサイトから画像をダウンロードし、アプリケーションディレクトリのルートに追加しました.それで、私にとって利用可能なNativeScriptコンポーネントを見て、私はテキストフィールドとボタンを使用しているように見えます、そして、私は何かで彼らを包む必要があります、そして、この場合、私はStackLayoutを使うことに決めました.また、NSについての1つの涼しいものは、彼らがActivityIndicator(回転/装填車輪)を箱から持っているということです.だから、いつでも私は“フック”それをすべてを追加するつもりだと私はロード状態としてアプリを通してそれを使用しているでしょう.

<template>
    <Page class="page">
        <StackLayout>
            <StackLayout class="logo-container">
                <Image src="~/logo.png" stretch="aspectFit" class="logo"/>
            </StackLayout>
            <StackLayout class="form">
                <ActivityIndicator color="#165E7B" :busy="loading" />
                <StackLayout :class="loading ? 'input-field opaque' : 'input-field'">
                    <TextField v-model="email" hint="Email" class="input" :isEnabled="!loading" />
                </StackLayout>
                <StackLayout :class="loading ? 'input-field opaque' : 'input-field'">
                    <TextField v-model="password" hint="Password" :secure="hidePassword" class="input" :isEnabled="!loading" />
                </StackLayout>
                <StackLayout :class="loading ? 'input-field opaque' : 'input-field'">
                    <Label class="input" @tap="hidePassword = !hidePassword" v-if="password.length">
                        <FormattedString>
                            <Span class="input-show" :text="hidePassword ? 'Show Password   ' : 'Hide Password   ' "/>
                            <Span class="fas input-show-pw-icon" text.decode="&#xf06e;" />
                        </FormattedString>
                    </Label>
                </StackLayout>
                <Button @tap="login" text="Login" :class="loading ? 'btn btn-primary opaque' : 'btn btn-primary'" :isEnabled="!loading" />
            </StackLayout>
        </StackLayout>
    </Page>
</template>

それは私のコンポーネントですので、すべての条件をabut心配しないでくださいと私たちは基本を行くつもりはない.テキスト入力に2通りのデータバインディングを使用するには、V - Modelを使用しています.私も隠すことができるように少しボタンで隠しパスワードの属性を追加することを決めた/それを表示します.ラベル/ボタンは、アイテムが“クリック”またはタップされたときに機能を実行することができます@タップメソッドを持っています.今のところ、私はAPIに接続するつもりはありません.ので、基本的にログインボタンをタップするときに私はチェックしたい場合は、空の入力がないことを確認し、その条件が満たされている場合は、“ホーム”ブレードにリダイレクトされます.あなたが思い出すならば、私は私が使用していない彼らのデフォルトVUEのすべてを取り除きました、しかし、私がこのmockedされたログインを得たあと、私もこれをしました.あなたは何でもあなたのために働くが、私が完全にnsに新しいので、私はそれが正しい方法を学び、それを学ぶことができるように基本的な“遅い”として行くことを決めた.

            login() {
                if(this.email !== '' && this.password !== '') {
                    this.$navigateTo(Home, {
                        animated: true,
                        transition: {
                            name: "slide",
                            duration: 200,
                            curve: "ease"
                        }
                    });
                }
            }

そして、私はアプリでホームコンポーネントを置き換えたことを忘れないでください.vueにログインしてこれを行います.

<template lang="html">
    <RadSideDrawer ref="drawer" drawerLocation="Left" gesturesEnabled="true" :drawerTransition="transition">
        <StackLayout ~drawerContent backgroundColor="#ffffff">
            <DrawerContent/>
        </StackLayout>
        <Frame ~mainContent ref="drawerMainContent">
            <Login />
        </Frame>
    </RadSideDrawer>
</template>

今、あなたはVueのように適切なコンポーネントをインポートする必要がありますし、あなたの新しいmockedログインをテストすることができます.それで、次の数週間の間、私はどんなパッケージを使用しているか、そしてAPIに接続しているか、エラーを処理し、どのようにして状態を管理するか、すべての基本を通過します.何か特定の場合は/ちょうど私のメッセージを探しているか、ここでコメントを残している.これはおそらく、私は実際に多くの経験を持っていないので、私は私が読んだdocsや他のブログを再編成している半分の時間とNSとその問題のために何かを持っていないので、これはおそらく退屈な記事になります.今のところ、あなたは素晴らしい週末を!