Day21 ホーム画面完成!

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 2/3 【ホームタブ編】

【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 2/3 【ホームタブ編】|川西発之 / 陳発暉|note
 note.mu

今日は昨日の詳細画面の続きからと思ったのですが、その前に…

実はグーグル先生からこんなメールが届きました。

わーいやったー!
このブログで Adsense が貼れるぞ―!

オホン、それはめっちゃ嬉しいけど、それじゃなくって、こちらのメールです。

Google Cloud Platform & APIs の月額請求書がご用意できました。このメールの末尾に添付されている PDF ドキュメントをご確認ください。

ななな、なんdってーーーー!!!!ヽ(・ω・)/
まさかのご請求!!
無料やって言ったやないか!

そして添付されていたPDF はこちら

( ̄ー ̄)ニヤリ

m9(^Д^)プギャー

だだだだまされてなんかないんだからね!!!
勘違いしないでよね!!

ということで、グーグル先生から0円の請求書が届きました。

ε-(´∀`*)ホッ

さて、気を取り直して、今日は昨日の詳細画面の続きから。
ひたすらもくもく。ときどきメモ。

地図の次は、画像表示機能を付けます。

はい!がんばります!

また、今はまだ`.map()`関数内で`index`を使っていないので黄色い声援……じゃなくて警告メッセージが出ていますが、次のステップでちゃんと`index`使うので消える予定です。

ほえー。エラーが普通に出た。

This error is located at:
    in RCTView (at View.js:45)
    in View (at DetailScreen.js:69)
    in RCTScrollContentView (at ScrollView.js:976)

69 行目は View タグ。
71 行目のコメント
// `imageArray`の個数分(3つ)だけ繰り返す
80 行目のコメント
// ←追記ここまで

この2つを消したら、エラーがなくなった!

そして、画面を確認できるようになったところで、ちゃんと詳細画面の下に、画像が3つある!

さらに、add_image を2つ削除したものについては、ちゃんと add_image が削除されている!

そして最後までやってきました!
完成はこちら!!

はい、お疲れ様でしたー!
これでホームタブは完成です!

おおおおお!!!
これで 2/3 が終わりましたーーーー!

何度となく // 追記ここから に悩まされたので、だんだんエラーメッセージも読めるようになってきました笑

さぁ明日からは最後のプラスボタン編やっていきます!

コメントする

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

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