Day24 AddScreen.js の仕上げに取り掛かる

今日最初にご報告したいことは、AWS からご請求が来まして。

無料枠でやってるのに、ご請求はないやろー(CV:大木こだま)

って思ってたんです。昨日までは。

しかし、AWSを今日のぞいてみると、しっかり課金されていました!

0.54 $ かー。いくらかな?

58円かー。DNSやってくれて58円で、サーバーとかもろもろ面倒みてくださって、本当にどうもありがとうございます。

無料枠ばっかり使って申し訳ありません。精進して、これからは高額課金者になれるようがんばります。

ジェフ・ペゾス氏をはじめ、Amazon の皆さまの技術と無料枠の広さに感謝申し上げております。

さて、気を取り直して

引き続き最終章です。

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 3/3 【プラスボタン編】

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 3/3 【プラスボタン編】|川西発之 / 陳発暉|note ※※※※※本記事は2018年5月に執筆されました.当時の React Native の環境から変わっている部分もありますので,2020年5月より記事の値段を大幅値下げすると同時に,記事更新や質問等のサポートの対象外とさせて頂きます.m(_ _ )m1/3 【ウェルカム画面編】:799円 → 199円2/3 【ホームタブ編】:899円 → 299円3/3 【プラスボタン編】:999円 → 399円※※※※※
 note.mu

もくもくやっていきます。

評価データの追加機能を作る下準備さていよいよ評価データを追加する画面`AddScreen`を作成していきます。

がんばるぞー!

また後々使うので、評価ランクに関する定数(`GREAT`, `GOOD`, `POOR`等)とスマホ画面の横幅の定数(`SCREEN_WIDTH`)も同じ箇所に追記します。

const 関連は1つのファイルにまとめないほうがいいのかしらーもしかしてまとめられない?あとで調査。

また、忘れずに`Dimensions`をインポートしてください。

ここで ‘react-native’ の import 部分を見ると、StyleSheet があるんですが、さっきなかったから消したのにまた復活してるーー!って思いました。

後から出てきたほうが正かと思いますし、途中で無くなるものではないと思うので、コピペミスかな?

import React from 'react';
import {
  StyleSheet, Text, View,
  Dimensions, // ←追記部分
} from 'react-native';
import { Icon } from 'react-native-elements';

これが正しいはず。

アニメーションは`componentDidUpdate()`関数の中で設定します。

この note の記事は初心者さんが読んでるのでこういうのは迷わないのかもしれませんが、関数名を自分で(著者が)決めているのか、それともこういう関数が用意されているのかは、少しでいいので情報が欲しかったなと思いました。

「●●という意味で名付けました」みたいなのでいいので、知りたかった。

例えばこの関数は、componentDidUpdate って名前で、

`componentDidUpdate()`関数は画面上で何か再描画される度に実行される関数で、その都度`LayoutAnimation.easeInEaseOut()`というアニメーションを施してくれます。

画面上で何か再描画される度に実行される関数だったら、afterRender とかがいい気がするんだけどなー。なんかちょっと違和感あった。あとで考えよう。この考察に深い意味はない(動きに影響がない)ので、続けます!

ヘッダーを自作しよう

はいやりましょう!

プラスボタンを押すとちゃんと水色のヘッダーが表示されていますね!左上のバツボタンを押すとHomeScreenに戻るはずです。

出てきたーー!!!

今日はここまで!
あと少しで完走だ!!

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください