Day27 プロトタイプアプリに メモ欄を追加する

【両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.js で、評価の顔の下にメモ欄を追加する。
  • 100文字までで制限をかけたい。
  • DetailScreen.js の日付の下とかにメモを表示する。

調査開始

「React native コンポーネント Form」で検索すると、これがヒットしました。

フォーム – React ');background-repeat:no-repeat;background-position:50%;background-size:100%;overflow:hidden;text-indent:-9000px;width:110px;height:100%;display:block;margin-left:auto;margin-right:5px}.em-ja{font-weight:bolder;font-style:normal}.css-1tv5sxm,[data-css-1tv5sxm]{flex:1 0 auto;margin-top:60px;-webkit-flex:1 0 auto;}@media (min-width: 780px) and (max-width: 1279px){.css-1tv5sxm,[data-css-1tv5sxm]{margin-top:50px;}}@media (max-width: 779px){.css-1tv5sxm,[data-css-1tv5sxm]{margin-top:40px;}}.css-190hivd,[data-css-190hivd]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:column;min-height:calc(100vh - 40px);-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;}.css-184keb2,[data-css-184keb2]{color:inherit;margin-left:10px;font-weight:700;font-size:20px;line-height:20px;}@media (max-width: 979px){.css-184keb2,[data-css-184keb2]{font-size:16px;margin-top:1px;}}@media (max-width: 599px){.css-184keb2,[data-css-184keb2]{position:absolute;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0;}}.css-4ivotw,[data-css-4ivotw]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;margin-right:10px;height:100%;align-items:center;color:#61dafb;-webkit-box-align:center;-webkit-align-items:center;}.css-4ivotw:focus,[data-css-4ivotw]:focus{outline:0;color:#ffffff;}@media (min-width: 600px){.css-4ivotw,[data-css-4ivotw]{width:calc(100% / 6);}}@media (max-width: 599px){.css-4ivotw,[data-css-4ivotw]{flex:0 0 auto;-webkit-flex:0 0 auto;}}.css-79txt3,[data-css-79txt3]{flex:1;display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:row;align-items:stretch;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;height:100%;scrollbar-width:none;-ms-overflow-style:none;-webkit-flex:1;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-webkit-box-align:stretch;-webkit-align-items:stretch;}.css-79txt3::-webkit-scrollbar,[data-css-79txt3]::-webkit-scrollbar{display:none;}@media (min-width: 0px) and (max-width: 599px){.css-79txt3,[data-css-79txt3]{flex-grow:1;width:auto;-webkit-flex-grow:1;}}@media (max-width: 599px){.css-79txt3,[data-css-79txt3]{mask-image:-webkit-linear-gradient(to right, transparent, black 20px, black 90%, transparent); mask-image: -moz-linear-gradient(to right, transparent, black 20px, black 90%, transparent); mask-image: linear-gradient(to right, transparent, black 20px, black 90%, transparent);-webkit-mask-image:-webkit-linear-gradient(to right, transparent, black 20px, black 90%, transparent); -webkit-mask-image: -moz-linear-gradient(to right, transparent, black 20px, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black 90%, transparent);}}.css-zvm479,[data-css-zvm479]{padding:5px 10px;white-space:nowrap;font-size:14px;}.css-zvm479:hover,[data-css-zvm479]:hover{color:#61dafb;}.css-zvm479:focus,[data-css-zvm479]:focus{outline:0;background-color:#373940;border-radius:15px;}@media (max-width: 779px){.css-zvm479,[data-css-zvm479]{display:none;}}.css-1rsw1pf,[data-css-1rsw1pf]{margin-left:0.5rem;}@media (max-width: 779px){.css-1rsw1pf,[data-css-1rsw1pf]{display:none;}}.css-1upvlu3,[data-css-1upvlu3]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items:center;padding:5px 10px;white-space:nowrap;font-size:14px;-webkit-box-align:center;-webkit-align-items:center;}.css-1upvlu3:hover,[data-css-1upvlu3]:hover{color:#61dafb;}.css-1upvlu3:focus,[data-css-1upvlu3]:focus{outline:0;background-color:#373940;border-radius:15px;}.css-6oo1gu,[data-css-6oo1gu]{padding:5px 10px;margin-left:10px;white-space:nowrap;font-size:14px;}.css-6oo1gu:hover,[data-css-6oo1gu]:hover{color:#61dafb;}.css-6oo1gu:focus,[data-css-6oo1gu]:focus{outline:0;background-color:#373940;border-radius:15px;}@media (max-width: 979px){.css-6oo1gu,[data-css-6oo1gu]{display:none;}}.css-nypjs8,[data-css-nypjs8]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;align-items:center;justify-content:flex-end;width:auto;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-pack:end;-webkit-justify-content:flex-end;}.css-iiezwn,[data-css-iiezwn]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:row;align-items:center;height:60px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;}@media (min-width: 600px) and (max-width: 1279px){.css-iiezwn,[data-css-iiezwn]{height:50px;}}@media (max-width: 599px){.css-iiezwn,[data-css-iiezwn]{height:40px;}}.css-19rsoyj,[data-css-19rsoyj]{background-color:#20232a;color:#ffffff;position:fixed;z-index:1;width:100%;top:0;left:0;}@media print{.css-19rsoyj,[data-css-19rsoyj]{display:none;}}.css-tctv7l,[data-css-tctv7l]{padding-left:20px;padding-right:20px;margin-left:auto;margin-right:auto;}@media (min-width: 780px){.css-tctv7l,[data-css-tctv7l]{width:90%;}}@media (min-width: 1340px){.css-tctv7l,[data-css-tctv7l]{max-width:1260px;}}@media (min-width: 600px){.css-2y24fj,[data-css-2y24fj]{position:absolute;bottom:-1px;height:4px;background:#61dafb;left:0;right:0;z-index:1;}}.css-li68ai,[data-css-li68ai]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:row;align-items:center;color:#61dafb;transition:color 0.2s ease-out;padding-left:15px;padding-right:15px;font-weight:300;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;-webkit-transition:color 0.2s ease-out;-moz-transition:color 0.2s ease-out;}.css-li68ai:focus,[data-css-li68ai]:focus{outline:0;background-color:#373940;color:#ffffff;}@media (min-width: 0px) and (max-width: 599px){.css-li68ai,[data-css-li68ai]{padding-left:8px;padding-right:8px;}}@media (min-width: 600px) and (max-width: 979px){.css-li68ai,[data-css-li68ai]{padding-left:10px;padding-right:10px;}}@media (min-width: 1280px){.css-li68ai,[data-css-li68ai]{padding-left:20px;padding-right:20px;font-size:18px;}.css-li68ai:hover:not(:focus),[data-css-li68ai]:hover:not(:focus){color:#61dafb;}}@media (min-width: 600px){.css-li68ai,[data-css-li68ai]{position:relative;}}.css-hobwqm,[data-css-hobwqm]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:row;align-items:center;color:#ffffff;transition:color 0.2s ease-out;padding-left:15px;padding-right:15px;font-weight:300;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;-webkit-transition:color 0.2s ease-out;-moz-transition:color 0.2s ease-out;}.css-hobwqm:focus,[data-css-hobwqm]:focus{outline:0;background-color:#373940;color:#ffffff;}@media (min-width: 0px) and (max-width: 599px){.css-hobwqm,[data-css-hobwqm]{padding-left:8px;padding-right:8px;}}@media (min-width: 600px) and (max-width: 979px){.css-hobwqm,[data-css-hobwqm]{padding-left:10px;padding-right:10px;}}@media (min-width: 1280px){.css-hobwqm,[data-css-hobwqm]{padding-left:20px;padding-right:20px;font-size:18px;}.css-hobwqm:hover:not(:focus),[data-css-hobwqm]:hover:not(:focus){color:#61dafb;}}.css-7dpbpx,[data-css-7dpbpx]{width:100%;appearance:none;background:transparent;border:0;color:#ffffff;font-size:18px;font-weight:300;font-family:inherit;position:relative;padding:4px 4px 4px 29px;background-image:url(/search.svg);background-size:16px 16px;background-repeat:no-repeat;background-position-y:center;background-position-x:4px;-webkit-appearance:none;-moz-appearance:none;}.css-7dpbpx:focus,[data-css-7dpbpx]:focus{outline:0;background-color:#373940;border-radius:0.25rem;}@media (max-width: 1179px){.css-7dpbpx,[data-css-7dpbpx]{font-size:16px;width:16px;transition:width 0.2s ease, padding 0.2s ease;padding-left:16px;-webkit-transition:width 0.2s ease, padding 0.2s ease;-moz-transition:width 0.2s ease, padding 0.2s ease;}.css-7dpbpx:focus,[data-css-7dpbpx]:focus{padding-left:29px;width:8rem;outline:none;}}.css-33zy79,[data-css-33zy79]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex:0 0 auto;flex-direction:row;align-items:center;padding-left:0.25rem;padding-right:0.25rem;-webkit-flex:0 0 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;}@media (max-width: 1179px){.css-33zy79,[data-css-33zy79]{justify-content:flex-end;margin-right:10px;-webkit-box-pack:end;-webkit-justify-content:flex-end;}}@media (min-width: 1180px){.css-33zy79,[data-css-33zy79]{min-width:100px;}}.css-c4d79v,[data-css-c4d79v]{fill:currentColor;}.css-19vhmgv,[data-css-19vhmgv]{margin-left:5px;vertical-align:-2px;color:#6d6d6d;}.css-15lkjjo,[data-css-15lkjjo]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:column;flex-grow:1;flex-shrink:0;flex-basis:auto;justify-content:stretch;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-webkit-flex-grow:1;-webkit-flex-shrink:0;-webkit-flex-basis:auto;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-webkit-box-align:start;-webkit-align-items:flex-start;}.css-15weewl,[data-css-15weewl]{line-height:25px;}.css-15weewl .gatsby-highlight,[data-css-15weewl] .gatsby-highlight{margin-top:25px;margin-left:-30px;margin-right:-30px;margin-bottom:25px;padding-left:15px;padding-right:15px;}.css-15weewl a:not(.anchor):not(.gatsby-resp-image-link),[data-css-15weewl] a:not(.anchor):not(.gatsby-resp-image-link){background-color:rgba(187,239,253,0.3);border-bottom:1px solid rgba(0,0,0,0.2);color:#1a1a1a;}.css-15weewl a:not(.anchor):not(.gatsby-resp-image-link):hover,[data-css-15weewl] a:not(.anchor):not(.gatsby-resp-image-link):hover{background-color:#bbeffd;border-bottom-color:#1a1a1a;}.css-15weewl > p:first-child,[data-css-15weewl] > p:first-child{font-size:18px;font-weight:300;color:#6d6d6d;}.css-15weewl > p:first-child a,[data-css-15weewl] > p:first-child a, .css-15weewl > p:first-child strong, [data-css-15weewl] > p:first-child strong{font-weight:400;}.css-15weewl p,[data-css-15weewl] p{margin-top:30px;font-size:17px;line-height:1.7;max-width:42em;}.css-15weewl p:first-of-type,[data-css-15weewl] p:first-of-type{margin-top:15px;}.css-15weewl p:first-child,[data-css-15weewl] p:first-child{margin-top:0;}.css-15weewl h3 + p,[data-css-15weewl] h3 + p, .css-15weewl h3 + p:first-of-type, [data-css-15weewl] h3 + p:first-of-type{margin-top:20px;}.css-15weewl p > code,[data-css-15weewl] p > code, .css-15weewl li > code, [data-css-15weewl] li > code{background:rgba(255,229,100,0.2);color:#1a1a1a;}.css-15weewl p > code,[data-css-15weewl] p > code, .css-15weewl li > code, [data-css-15weewl] li > code, .css-15weewl p > a > code, [data-css-15weewl] p > a > code, .css-15weewl li > a > code, [data-css-15weewl] li > a > code{padding:0 3px;font-size:0.94em;word-break:break-word;}.css-15weewl hr,[data-css-15weewl] hr{height:1px;margin-bottom:-1px;border:none;border-bottom:1px solid #ececec;margin-top:40px;}.css-15weewl hr:first-child,[data-css-15weewl] hr:first-child{margin-top:0;}.css-15weewl h1,[data-css-15weewl] h1{line-height:1.2;}.css-15weewl h2::before,[data-css-15weewl] h2::before{content:" ";display:block;border-bottom:1px solid #ececec;padding-top:44px;margin-bottom:40px;}.css-15weewl h2,[data-css-15weewl] h2{line-height:1.2;}.css-15weewl h2:first-child::before,[data-css-15weewl] h2:first-child::before{content:" ";display:block;border-bottom:0;padding-top:40px;margin-top:-80px;}.css-15weewl hr + h2,[data-css-15weewl] hr + h2{border-top:0;margin-top:0;}.css-15weewl h3::before,[data-css-15weewl] h3::before{content:" ";display:block;padding-top:90px;margin-top:-45px;}.css-15weewl h2 + h3::before,[data-css-15weewl] h2 + h3::before, .css-15weewl h2 + h3:first-of-type::before, [data-css-15weewl] h2 + h3:first-of-type::before{content:" ";display:block;padding-top:60px;margin-top:-30px;}.css-15weewl h4::before,[data-css-15weewl] h4::before{content:" ";display:block;padding-top:100px;margin-top:-50px;}.css-15weewl h4,[data-css-15weewl] h4{font-size:20px;color:#6d6d6d;line-height:1.3;font-weight:400;}.css-15weewl h4 + p,[data-css-15weewl] h4 + p{margin-top:20px;}.css-15weewl ol,[data-css-15weewl] ol, .css-15weewl ul, [data-css-15weewl] ul{margin-top:20px;font-size:16px;color:#1a1a1a;padding-left:20px;}.css-15weewl ol p,[data-css-15weewl] ol p, .css-15weewl ul p, [data-css-15weewl] ul p, .css-15weewl ol p:first-of-type, [data-css-15weewl] ol p:first-of-type, .css-15weewl ul p:first-of-type, [data-css-15weewl] ul p:first-of-type{font-size:16px;margin-top:0;line-height:1.2;}.css-15weewl ol li,[data-css-15weewl] ol li, .css-15weewl ul li, [data-css-15weewl] ul li{margin-top:10px;}.css-15weewl ol li.button-newapp,[data-css-15weewl] ol li.button-newapp, .css-15weewl ul li.button-newapp, [data-css-15weewl] ul li.button-newapp{margin-top:0;}.css-15weewl ol ol,[data-css-15weewl] ol ol, .css-15weewl ul ol, [data-css-15weewl] ul ol, .css-15weewl ol ul, [data-css-15weewl] ol ul, .css-15weewl ul ul, [data-css-15weewl] ul ul{margin-left:20px;margin-top:10px;}.css-15weewl img,[data-css-15weewl] img{max-width:100%;}.css-15weewl ol,[data-css-15weewl] ol{list-style:decimal;}.css-15weewl ul,[data-css-15weewl] ul{list-style:disc;}.css-15weewl blockquote,[data-css-15weewl] blockquote{background-color:rgba(255,229,100,0.3);border-left-color:#ffe564;border-left-width:9px;border-left-style:solid;padding:20px 45px 20px 26px;margin-bottom:30px;margin-top:20px;margin-left:-30px;margin-right:-30px;}.css-15weewl blockquote p,[data-css-15weewl] blockquote p{margin-top:15px;}.css-15weewl blockquote p:first-of-type,[data-css-15weewl] blockquote p:first-of-type{font-weight:700;margin-top:0;}.css-15weewl blockquote p:nth-of-type(2),[data-css-15weewl] blockquote p:nth-of-type(2){margin-top:0;}.css-15weewl blockquote .gatsby-highlight,[data-css-15weewl] blockquote .gatsby-highlight{margin-left:0;}.css-15weewl .gatsby-highlight + blockquote,[data-css-15weewl] .gatsby-highlight + blockquote{margin-top:40px;}.css-15weewl .gatsby-highlight + h4::before,[data-css-15weewl] .gatsby-highlight + h4::before{content:" ";display:block;padding-top:85px;margin-top:-60px;}@media (max-width: 599px){.css-15weewl .gatsby-highlight,[data-css-15weewl] .gatsby-highlight{margin-left:-20px;margin-right:-20px;border-radius:0;}.css-15weewl h3,[data-css-15weewl] h3{overflow-wrap:break-word;word-break:break-word;}.css-15weewl blockquote,[data-css-15weewl] blockquote{margin-left:-20px;margin-right:-20px;}}@media (min-width: 1280px){.css-15weewl > p:first-child,[data-css-15weewl] > p:first-child{font-size:24px;}.css-15weewl h1,[data-css-15weewl] h1{font-size:60px;}.css-15weewl h2,[data-css-15weewl] h2{font-size:35px;}.css-15weewl h3,[data-css-15weewl] h3{font-size:25px;line-height:1.3;}}@media (max-width: 979px){.css-15weewl p,[data-css-15weewl] p{font-size:16px;margin-top:25px;}.css-15weewl h2,[data-css-15weewl] h2{font-size:20px;}}@media (min-width: 0px) and (max-width: 599px){.css-15weewl h1,[data-css-15weewl] h1{font-size:30px;}}@media (min-width: 600px) and (max-width: 1279px){.css-15weewl h1,[data-css-15weewl] h1{font-size:45px;}}.css-1x091gh,[data-css-1x091gh]{color:#6d6d6d;border-color:#ececec;transition:all 0.2s ease;transition-propery:color, border-color;white-space:nowrap;border-bottom-width:1px;border-bottom-style:solid;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;}.css-1x091gh:hover,[data-css-1x091gh]:hover{color:#1a1a1a;border-color:#1a1a1a;}.css-1m173d1,[data-css-1m173d1]{margin-top:80px;}.css-124oy3v,[data-css-124oy3v]{margin-top:40px;margin-bottom:120px;}@media (min-width: 780px){.css-124oy3v,[data-css-124oy3v]{margin-top:50px;}}.css-1kbu8hg,[data-css-1kbu8hg]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;}@media (min-width: 600px){.css-1kbu8hg,[data-css-1kbu8hg]{border-left:1px solid #ececec;margin-left:80px;}}@media (min-width: 600px) and (max-width: 1339px){.css-1kbu8hg,[data-css-1kbu8hg]{flex:0 0 200px;margin-left:80px;-webkit-flex:0 0 200px;}}@media (min-width: 600px) and (max-width: 979px){.css-1kbu8hg,[data-css-1kbu8hg]{margin-left:40px;}}@media (min-width: 1100px){.css-1kbu8hg,[data-css-1kbu8hg]{flex:0 0 300px;-webkit-flex:0 0 300px;}}@media (min-width: 2000px){.css-1kbu8hg,[data-css-1kbu8hg]{position:fixed;right:0;width:300px;z-index:2;}}.css-10335ra,[data-css-10335ra]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;min-height:calc(100vh - 60px);}@media (min-width: 2000px){.css-10335ra,[data-css-10335ra]{max-width:840px;margin-left:auto;margin-right:auto;}}@media (max-width: 599px){.css-10335ra,[data-css-10335ra]{flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;}}.css-12vsfho,[data-css-12vsfho]{flex:1 0 auto;-webkit-flex:1 0 auto;}.css-5v0gxc,[data-css-5v0gxc]{width:100%;flex:1 0 auto;position:relative;z-index:0;-webkit-flex:1 0 auto;}.css-95xunl,[data-css-95xunl]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:column;flex-grow:1;flex-shrink:0;flex-basis:auto;justify-content:flex-start;align-items:stretch;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-webkit-flex-grow:1;-webkit-flex-shrink:0;-webkit-flex-basis:auto;-webkit-box-pack:start;-webkit-justify-content:flex-start;-webkit-box-align:stretch;-webkit-align-items:stretch;}.css-174qq1k,[data-css-174qq1k]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:column;flex-grow:1;flex-shrink:1;flex-basis:auto;justify-content:flex-start;align-items:stretch;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-webkit-flex-grow:1;-webkit-flex-shrink:1;-webkit-flex-basis:auto;-webkit-box-pack:start;-webkit-justify-content:flex-start;-webkit-box-align:stretch;-webkit-align-items:stretch;}.css-1rwyxsf,[data-css-1rwyxsf]{color:#282c34;margin-bottom:0;margin-top:40px;font-size:60px;line-height:65px;font-weight:700;}@media (max-width: 599px){.css-1rwyxsf,[data-css-1rwyxsf]{overflow-wrap:break-word;word-break:break-word;}}@media (max-width: 779px){.css-1rwyxsf,[data-css-1rwyxsf]{font-size:40px;line-height:45px;}}@media (min-width: 780px) and (max-width: 979px){.css-1rwyxsf,[data-css-1rwyxsf]{margin-top:60px;}}@media (min-width: 980px){.css-1rwyxsf,[data-css-1rwyxsf]{margin-top:80px;}}.css-hgc6lu,[data-css-hgc6lu]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:row;flex-grow:0;flex-shrink:1;flex-basis:auto;justify-content:space-between;align-items:baseline;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-webkit-flex-grow:0;-webkit-flex-shrink:1;-webkit-flex-basis:auto;-webkit-box-pack:justify;-webkit-justify-content:space-between;-webkit-box-align:baseline;-webkit-align-items:baseline;}.css-p72dfi,[data-css-p72dfi]{margin-top:60px;}@media (min-width: 0px) and (max-width: 599px){.css-p72dfi,[data-css-p72dfi]{margin-top:40px;}}@media (min-width: 600px) and (max-width: 979px){.css-p72dfi,[data-css-p72dfi]{margin-top:0;}}@media (min-width: 780px) and (max-width: 1279px){.css-p72dfi,[data-css-p72dfi]{margin-top:50px;}}@media (min-width: 600px){.css-p72dfi,[data-css-p72dfi]{transform:none !important;-webkit-transform:none !important;}}@media (max-width: 599px){.css-3ao3zf,[data-css-3ao3zf]{top:0;left:0;bottom:0;right:0;position:fixed;background-color:#ffffff;z-index:2;height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch;pointer-events:none;}}@media (min-width: 780px){.css-3ao3zf,[data-css-3ao3zf]{margin-right:-999px;padding-right:999px;background-color:#f7f7f7;}}@media (min-width: 780px) and (max-width: 1999px){.css-3ao3zf,[data-css-3ao3zf]{position:fixed;z-index:2;height:100%;}}@media (min-width: 600px){.css-3ao3zf,[data-css-3ao3zf]{position:fixed;z-index:2;height:calc(100vh - 60px);overflow-y:auto;-webkit-overflow-scrolling:touch;margin-right:-999px;padding-right:999px;background-color:#f7f7f7;opacity:1 !important;}}@media (min-width: 600px) and (max-width: 779px){.css-3ao3zf,[data-css-3ao3zf]{height:calc(100vh - 40px);}}@media (min-width: 780px) and (max-width: 1279px){.css-3ao3zf,[data-css-3ao3zf]{height:calc(100vh - 50px);}}@media (min-width: 2000px){.css-3ao3zf,[data-css-3ao3zf]{border-left:1px solid #ececec;}}.css-1dgtft4,[data-css-1dgtft4]{width:20px;height:20px;align-self:center;display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:column;color:#61dafb;-webkit-align-self:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;}.css-7ef8f8,[data-css-7ef8f8]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:row;align-items:center;height:60px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;}@media (min-width: 780px) and (max-width: 1279px){.css-7ef8f8,[data-css-7ef8f8]{height:50px;}}@media (max-width: 599px){.css-7ef8f8,[data-css-7ef8f8]{height:60px;overflow:hidden;align-items:flex-start;-webkit-box-align:start;-webkit-align-items:flex-start;}}.css-yx40kw,[data-css-yx40kw]{background-color:#20232a;bottom:44px;color:#61dafb;display:none;cursor:pointer;position:fixed;right:20px;z-index:3;border-radius:50%;border:1px solid rgba(255, 255, 255, 0.1);box-shadow:0 0 20px rgba(0, 0, 0, 0.3);}@media (max-width: 599px){.css-yx40kw,[data-css-yx40kw]{display:inline-block;}}.css-7stz2q,[data-css-7stz2q]{width:100%;padding-left:20px;position:relative;}@media (min-width: 1100px){.css-7stz2q,[data-css-7stz2q]{padding-left:40px;}}@media (max-width: 599px){.css-7stz2q,[data-css-7stz2q]{padding-bottom:100px;}}.css-1aai96l,[data-css-1aai96l]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:column;flex-grow:0;flex-shrink:1;flex-basis:auto;justify-content:flex-start;align-items:stretch;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-webkit-flex-grow:0;-webkit-flex-shrink:1;-webkit-flex-basis:auto;-webkit-box-pack:start;-webkit-justify-content:flex-start;-webkit-box-align:stretch;-webkit-align-items:stretch;}.css-1j8jxus,[data-css-1j8jxus]{cursor:pointer;background-color:transparent;border:0;margin-top:10px;}.css-19pur11,[data-css-19pur11]{color:#1a1a1a;display:inline-block;border-bottom:1px solid transparent;transition:border 0.2s ease;margin-top:5px;-webkit-transition:border 0.2s ease;-moz-transition:border 0.2s ease;}.css-19pur11:hover,[data-css-19pur11]:hover{color:#6d6d6d;}.css-atv6j6,[data-css-atv6j6]{margin-top:5px;}.css-14d3mgr,[data-css-14d3mgr]{font-feature-settings:'tnum';margin-bottom:10px;-webkit-font-feature-settings:'tnum';}@media (min-width: 600px){.css-14d3mgr,[data-css-14d3mgr]{display:none;}}.css-2yhcrf,[data-css-2yhcrf]{color:#6d6d6d;font-size:14px;font-weight:700;line-height:3;text-transform:uppercase;text-align:start;letter-spacing:0.08em;}@media (min-width: 600px){.css-2yhcrf,[data-css-2yhcrf]{color:#6d6d6d;}.css-2yhcrf:hover,[data-css-2yhcrf]:hover{color:#1a1a1a;}}.css-1jiuhrf,[data-css-1jiuhrf]{margin-left:7px;transform:rotateX(0deg);transition:-webkit-transform 0.2s ease,transform 0.2s ease;-webkit-transform:rotateX(0deg);-webkit-transition:-webkit-transform 0.2s ease,transform 0.2s ease;-moz-transition:transform 0.2s ease;}@media (max-width: 599px){.css-1jiuhrf,[data-css-1jiuhrf]{display:none;}}.css-140tz9x,[data-css-140tz9x]{margin-left:20px;}.css-ifgy4z,[data-css-ifgy4z]{width:4px;height:25px;border-left:4px solid #61dafb;padding-left:16px;position:absolute;left:0;margin-top:-3px;}@media (min-width: 1100px){.css-ifgy4z,[data-css-ifgy4z]{left:15px;}}.css-1b7a3df,[data-css-1b7a3df]{color:#1a1a1a;display:inline-block;border-bottom:1px solid transparent;transition:border 0.2s ease;margin-top:5px;font-weight:700;-webkit-transition:border 0.2s ease;-moz-transition:border 0.2s ease;}.css-1b7a3df:hover,[data-css-1b7a3df]:hover{color:#6d6d6d;}.css-ts0qly,[data-css-ts0qly]{font-feature-settings:'tnum';margin-bottom:10px;-webkit-font-feature-settings:'tnum';}@media (min-width: 600px){.css-ts0qly,[data-css-ts0qly]{display:block;}}.css-13zw18r,[data-css-13zw18r]{color:#6d6d6d;font-size:14px;font-weight:700;line-height:3;text-transform:uppercase;text-align:start;letter-spacing:0.08em;}@media (min-width: 600px){.css-13zw18r,[data-css-13zw18r]{color:#1a1a1a;}.css-13zw18r:hover,[data-css-13zw18r]:hover{color:#1a1a1a;}}.css-1mwek35,[data-css-1mwek35]{margin-left:7px;transform:rotateX(180deg);transition:-webkit-transform 0.2s ease,transform 0.2s ease;-webkit-transform:rotateX(180deg);-webkit-transition:-webkit-transform 0.2s ease,transform 0.2s ease;-moz-transition:transform 0.2s ease;}@media (max-width: 599px){.css-1mwek35,[data-css-1mwek35]{display:none;}}.css-sg9l1i,[data-css-sg9l1i]{transform:translate(2px, -4px) rotate(180deg);transition:-webkit-transform 0.2s ease,transform 0.2s ease;-webkit-transform:translate(2px, -4px) rotate(180deg);-webkit-transition:-webkit-transform 0.2s ease,transform 0.2s ease;-moz-transition:transform 0.2s ease;}.css-o1zbu3,[data-css-o1zbu3]{transform:translate(2px, 4px);transition:-webkit-transform 0.2s ease,transform 0.2s ease;-webkit-transform:translate(2px, 4px);-webkit-transition:-webkit-transform 0.2s ease,transform 0.2s ease;-moz-transition:transform 0.2s ease;}.css-1gz2d9j,[data-css-1gz2d9j]{padding-top:10px;}.css-syjz65,[data-css-syjz65]{text-align:right;}@media (min-width: 600px) and (max-width: 979px){.css-15o825x,[data-css-15o825x]{padding-right:240px;}}@media (min-width: 980px) and (max-width: 1339px){.css-15o825x,[data-css-15o825x]{padding-right:280px;}}@media (min-width: 1100px) and (max-width: 1999px){.css-15o825x,[data-css-15o825x]{padding-right:380px;}}.css-uygc5k,[data-css-uygc5k]{background:#282c34;color:#ffffff;padding-top:50px;padding-bottom:50px;}.css-lhap5,[data-css-lhap5]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:row;flex-grow:0;flex-shrink:1;flex-basis:auto;justify-content:space-between;align-items:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-webkit-flex-grow:0;-webkit-flex-shrink:1;-webkit-flex-basis:auto;-webkit-box-pack:justify;-webkit-justify-content:space-between;-webkit-box-align:start;-webkit-align-items:flex-start;}.css-k2v7we,[data-css-k2v7we]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:row;flex-grow:0;flex-shrink:1;flex-basis:50%;justify-content:flex-start;align-items:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-webkit-flex-grow:0;-webkit-flex-shrink:1;-webkit-flex-basis:50%;-webkit-box-pack:start;-webkit-justify-content:flex-start;-webkit-box-align:start;-webkit-align-items:flex-start;}.css-14qyarc,[data-css-14qyarc]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:row;flex-grow:0;flex-shrink:1;flex-basis:50%;justify-content:flex-end;align-items:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-webkit-flex-grow:0;-webkit-flex-shrink:1;-webkit-flex-basis:50%;-webkit-box-pack:end;-webkit-justify-content:flex-end;-webkit-box-align:start;-webkit-align-items:flex-start;}.css-i3b7x6,[data-css-i3b7x6]{color:#61dafb;font-size:14px;}.css-1k1lek8,[data-css-1k1lek8]{display:inline;border-color:#6d6d6d;transition:border-color 0.2s ease;font-size:30px;border-bottom-width:1px;border-bottom-style:solid;-webkit-transition:border-color 0.2s ease;-moz-transition:border-color 0.2s ease;}.css-1k1lek8:hover,[data-css-1k1lek8]:hover{border-color:#ffffff;}@media (max-width: 979px){.css-1k1lek8,[data-css-1k1lek8]{font-size:24px;}}@media (min-width: 0px) and (max-width: 599px){.css-1k1lek8,[data-css-1k1lek8]{font-size:16px;}}.css-1q9mcvr,[data-css-1q9mcvr]{flex-wrap:wrap;display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-box-lines:multiple;-webkit-flex-wrap:wrap;}@media (max-width: 979px){.css-1q9mcvr,[data-css-1q9mcvr]{width:100%;}}@media (min-width: 1280px){.css-1q9mcvr,[data-css-1q9mcvr]{width:calc(100% / 3 * 2);padding-left:40px;}}.css-1izr7si,[data-css-1izr7si]{max-width:160px;height:auto;}.css-1yy5aal,[data-css-1yy5aal]{color:#999;padding-top:15px;}.css-1ac8j74,[data-css-1ac8j74]{padding-top:40px;display:block !important;}@media (min-width: 1280px){.css-1ac8j74,[data-css-1ac8j74]{width:calc(100% / 3);order:-1;-webkit-order:-1;}}@media (min-width: 980px){.css-1ac8j74,[data-css-1ac8j74]{order:-1;-webkit-order:-1;}}@media (max-width: 979px){.css-1ac8j74,[data-css-1ac8j74]{text-align:center;width:100%;padding-top:40px;}}.css-ftk3jl,[data-css-ftk3jl]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:row;flex-wrap:wrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-webkit-box-lines:multiple;-webkit-flex-wrap:wrap;}@media (min-width: 600px) and (max-width: 979px){.css-ftk3jl,[data-css-ftk3jl]{padding-right:240px;}}@media (min-width: 980px) and (max-width: 1339px){.css-ftk3jl,[data-css-ftk3jl]{padding-right:280px;}}@media (min-width: 1100px) and (max-width: 1999px){.css-ftk3jl,[data-css-ftk3jl]{padding-right:380px;}}.css-vn0yrr,[data-css-vn0yrr]{background-color:#20232a;color:#ffffff;padding-top:10px;padding-bottom:50px;}@media (min-width: 2000px){.css-vn0yrr,[data-css-vn0yrr]{padding-top:40px;}}@media print{.css-vn0yrr,[data-css-vn0yrr]{display:none;}}.css-1m3wp4q,[data-css-1m3wp4q]{display:-webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex;flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;}.css-12bsqfj,[data-css-12bsqfj]{display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:column;align-items:flex-start;width:50%;padding-top:40px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-webkit-box-align:start;-webkit-align-items:flex-start;}@media (min-width: 2000px){.css-12bsqfj,[data-css-12bsqfj]{padding-top:0;width:25%;}}.css-krwajx,[data-css-krwajx]{color:#999;font-size:14px;font-weight:700;line-height:3;text-transform:uppercase;text-align:start;letter-spacing:0.08em;}.css-8l81zy,[data-css-8l81zy]{line-height:2;}.css-8l81zy:hover,[data-css-8l81zy]:hover{color:#61dafb;}.css-83uoqv,[data-css-83uoqv]{vertical-align:-2px;display:inline-block;margin-left:5px;color:#6d6d6d;} // .anchor { float: left; padding-right: 4px; margin-left: -20px; } h1 .anchor svg, h2 .anchor svg, h3 .anchor svg, h4 .anchor svg, h5 .anchor svg, h6 .anchor svg { visibility: hidden; } h1:hover .anchor svg, h2:hover .anchor svg, h3:hover .anchor svg, h4:hover .anchor svg, h5:hover .anchor svg, h6:hover .anchor svg, h1 .anchor:focus svg, h2 .anchor:focus svg, h3 .anchor:focus svg, h4 .anchor:focus svg, h5 .anchor:focus svg, h6 .anchor:focus svg { visibility: visible; } document.addEventListener("DOMContentLoaded", function(event) { var hash = window.decodeURI(location.hash.replace('#', '')) if (hash !== '') { var element = document.getElementById(hash) if (element) { var offset = element.offsetTop // Wait for the browser to finish rendering before scrolling. setTimeout((function() { window.scrollTo(0, offset - 0) }), 0) } } }) フォーム – ReactReactDocsTutorialBlogCommunityv16.12.0 LanguagesGitHubフォーム自然な HTML のフォーム要素は内部に何らかの状態を持っていますので、フォーム要素は React において他の DOM 要素とちょっと異なる動作をします。例えば、このプレーン HTML によるフォームは 1 つの名前を受け付けます:
 ja.reactjs.org

とりあえず上から下まで読む。

HTML では <input>、<textarea>、そして <select> のようなフォーム要素は通常、自身で状態を保持しており、ユーザーの入力に基づいてそれを更新します。React では、変更されうる状態は通常はコンポーネントの state プロパティに保持され、setState() 関数でのみ更新されます。

ほー

フォーム要素の value 属性が設定されているので、表示される値は常に this.state.value となり、React の state が信頼できる情報源となります。handleChange はキーストロークごとに実行されて React の state を更新するので、表示される値はユーザーがタイプするたびに更新されます。

ほー

React では、<textarea> は代わりに value 属性を使用します。こうすることで、<textarea> を使用するフォームは単一行の入力フォームと非常に似た書き方ができるようになります:

ほー

引用たくさんしたけど、なんとなく理解はしました。

この状態を保持して表示してっていうのが、回りくどいけどなんとなく理解できるような気もします。状態って、リアルタイムだもんね!

こういう技術で、Slack とかで「XXXさんが入力してます…φ(..)」みたいなのとか出せるんだろうなー。

いろいろ考えた結果、こうしてみました。

// ゴニョゴニョ

const INITIAL_STATE = {
  // ゴニョゴニョ

  // 旅行の評価データ用
  tripDetail: {
    country: 'Select Counrty',
    dateFrom: 'From',
    dateTo: 'To',
    imageURIs: [
      require('../assets/add_image_placeholder.png'),
      require('../assets/add_image_placeholder.png'),
      require('../assets/add_image_placeholder.png'),
    ],
    rank: '',
    memo: '', // ←追記部分
  },

  // ゴニョゴニョ
};

class AddScreen extends React.Component {
  // ゴニョゴニョ

  // メモエリアを描画
  renderMemo() { // ←追記部分
    return (
      <View style={{ padding: 20 }}>
        <textarea value={this.state.tripDetail.memo} />
      </View>
    );
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
          // ゴニョゴニョ

          {this.renderDateToPicker()}

          {this.renderMap()}

          {this.renderImagePicker()}

          {this.renderReviewButtons()}

          {this.renderMemo()} // ←追記部分

          {this.renderAddButton()}
        </ScrollView>
      </View>
    );
  }
}

$ cd AwesomeProject
$ expo start

んで、真ん中のプラスボタンをクリックすると。
あらーーー。

Invariant Violation: View config not found for name textarea.

うーん、textarea はなんかコンポーネント使わないとだめっぽい。

さっき見てたの React のだった事に気が付きました!!React Native の公式を見ましょう!!

Components and APIs · React Native React Native provides a number of built-in components. You will find a full list of components and APIs on the sidebar to the left. If you're not sure where to get started, take a look at the following categories:
 facebook.github.io

TextInput コンポーネントっていうのかー

TextInput · React Native A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
 facebook.github.io

A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.

The simplest use case is to plop down a TextInput and subscribe to the onChangeText events to read the user input. There are also other events, such as onSubmitEditing and onFocus that can be subscribed to. A simple example:

なるほどね。
ということでこう直してみました。すると

// ゴニョゴニョ
import {
  StyleSheet, Text, TextInput, View, ScrollView, Picker, DatePickerIOS, TouchableOpacity, Image, // ← 追記部分 TextInput を追加
  Dimensions, LayoutAnimation, UIManager, Platform, AsyncStorage,
} from 'react-native';

// ゴニョゴニョ

const INITIAL_STATE = {
  // ゴニョゴニョ

  // 旅行の評価データ用
  tripDetail: {
    country: 'Select Counrty',
    dateFrom: 'From',
    dateTo: 'To',
    imageURIs: [
      require('../assets/add_image_placeholder.png'),
      require('../assets/add_image_placeholder.png'),
      require('../assets/add_image_placeholder.png'),
    ],
    rank: '', // ← 追記部分
    memo: '',
  },

  // ゴニョゴニョ
};

class AddScreen extends React.Component {
  // ゴニョゴニョ
  
  // メモエリアを描画
  renderMemo() { // ← 追記部分
    return (
      <View style={{ padding: 20 }}>
        <TextInput
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          onChangeText={(text) => this.setState({
            ...INITIAL_STATE, // `INITIAL_STATE`の中身をここに展開
            tripDetail: {
              ...INITIAL_STATE.tripDetail, // `INITIAL_STATE.tripDetail`の中身をここに展開
              memo: text
            }
          })}
          value={this.state.tripDetail.memo}
        />
      </View>
    );
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
          // ゴニョゴニョ

          {this.renderDateToPicker()}

          {this.renderMap()}

          {this.renderImagePicker()}

          {this.renderReviewButtons()}

          {this.renderMemo()} // ← 追記部分

          {this.renderAddButton()}
        </ScrollView>
      </View>
    );
  }
}

// ゴニョゴニョ

バグなくなったー!&なんかでた―!笑

TextInput は、1行なのかな??
height を 120 にしてみる(意味はない)

うん、たくさん入力できそう!
文字制限はどうだろうか。
maxlength という属性があるみたい。とりあえず3に設定してやってみる

あいうって入れたらそれ以後入力できな――い!
効いてる効いてる。
ということで 100 に設定する。

あれーー?
自動改行してくれないの―――?

調べると multiline っていうのと numberOfLines っていう属性があるようだ。これを true 4 と設定すると

おーできたーー!
登録してみたら、このまま登録できた。
うんよかった。
多分エラーは無い。

最終のソースはこんな感じです。

// ゴニョゴニョ
import {
  StyleSheet, Text, TextInput, View, ScrollView, Picker, DatePickerIOS, TouchableOpacity, Image, // ← 追記部分 TextInput を追加
  Dimensions, LayoutAnimation, UIManager, Platform, AsyncStorage,
} from 'react-native';

// ゴニョゴニョ

const INITIAL_STATE = {
  // ゴニョゴニョ

  // 旅行の評価データ用
  tripDetail: {
    country: 'Select Counrty',
    dateFrom: 'From',
    dateTo: 'To',
    imageURIs: [
      require('../assets/add_image_placeholder.png'),
      require('../assets/add_image_placeholder.png'),
      require('../assets/add_image_placeholder.png'),
    ],
    rank: '', // ← 追記部分
    memo: '',
  },

  // ゴニョゴニョ
};

class AddScreen extends React.Component {
  // ゴニョゴニョ
  
  // メモエリアを描画
  renderMemo() { // ← 追記部分
    return (
      <View style={{ padding: 20 }}>
        <Text>Memo: </Text>
        <TextInput
          style={{borderColor: 'gray', borderWidth: 1}}
          onChangeText={(text) => this.setState({
            ...INITIAL_STATE, // `INITIAL_STATE`の中身をここに展開
            tripDetail: {
              ...INITIAL_STATE.tripDetail, // `INITIAL_STATE.tripDetail`の中身をここに展開
              memo: text
            }
          })}
          value={this.state.tripDetail.memo}
          maxLength = {100}
          multiline = {true}
          numberOfLines = {4}
        />
      </View>
    );
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
          // ゴニョゴニョ

          {this.renderDateToPicker()}

          {this.renderMap()}

          {this.renderImagePicker()}

          {this.renderReviewButtons()}

          {this.renderMemo()} // ← 追記部分

          {this.renderAddButton()}
        </ScrollView>
      </View>
    );
  }
}

// ゴニョゴニョ

class DetailScreen extends React.Component {
  // ゴニョゴニョ

  render() {
    if (this.state.isMapLoaded === false) {
      return (
        <View style={{ flex: 1, justifyContent: 'center' }}>
          <ActivityIndicator size="large" />
        </View>
      );
    }

    return (
      <View style={{ flex: 1 }}>
        // ゴニョゴニョ

        <ScrollView>
          <View style={{ alignItems: 'center', padding: 20 }}>
            <Text style={{ fontSize: 30, padding: 5 }}>{this.props.detailReview.country}</Text>
            <Text style={{ padding: 5 }}>{this.props.detailReview.dateFrom} ~ {this.props.detailReview.dateTo}</Text>
            <Text style={{ padding: 5 }}>{this.props.detailReview.memo}</Text> // ← 追記部分
          </View>

          <MapView
            style={{ height: SCREEN_WIDTH }} // 高さをスマホ画面横幅と一緒にする(つまり正方形サイズ)
            scrollEnabled={false} // 地図上をスクロールできないようにする
            cacheEnabled={Platform.OS === 'android'} // Androidだけキャッシュをありにする
            initialRegion={this.state.initialRegion} // `this.state`の方の`initialRegion`に合わせる
          />

          {this.renderImages()}
        </ScrollView>
      </View>
    );
  }
}

// ゴニョゴニョ

最後に DetailScreen.js に1行追加してみたら、表示もされましたーーー!

今日はここまで!
明日は、サーバーとのやり取りについて調べてみます!

コメントする

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

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