[React Native]ToDoAppの作成:画面遷移設計

4839 ワード

styleがobjectとして同時に拡張される方法を考えてみましょう.
かっこを開く...撮ってくれれば、既存のスタイルを持ってきながら、状況に応じて私の欲しいスタイルを加えることができます.

TextInputのみ.(HTMLのようにtextareaがない)

TextInput


TextInputはReactNativeが入力を受信できる唯一の方法です.

いろいろな製品があります.
フォーカス:画面をクリックすると入力できます.
onPressIn
onPressOut
onChangeText
onChange

このようにCSSをすると丸く見えます

表示されるUIは、動作状態の真偽によって異なります.


キーボードタイプ:ユーザーがEメールまたは電話番号を入力する必要がある場合に使用します.


キーボードの形状が変化していることがわかります.

また、secureTextEntryを行うことで、入力パスワードの値を非表示にすることができます.

このようにpropsに値を割り当てることは,開発者がシステムを設定する方法である.
reactはcomponentとpropsの組み合わせであり、任意のプラットフォームのアクセス性を向上させることができます.
複数行書くことができます.
onChangeText



出力がよく見えます.TextInputにonChangeTextを入れてください.
ブラウザにはtargetとeventがありますが、ここにはありません.
autoCapitalizeという名前のPropsを設定して大文字を処理することもできます.

入力値stateに保存


次にプレイヤーの入力値をstateに保存します.
TextInputというコンポーネントに値を割り当てることでcontrolを得ることができる.
ユーザーが何かを入力すると、setText関数を使用してステータス値を変更できます.




これにより,ユーザが入力をクリックしたときにポップアッププロンプトウィンドウを確認できる.
何か入力しながら「完了」(Finish)をクリックすると、

一般的にはToDoディレクトリを含む資料型が用いられるが,ここではハッシュテーブルのためにObjectとした.
https://www.youtube.com/watch?v=HraOg7W3VAM
stateを直接変更することは絶対にできません.そのため、以前のstateをインポートし、コピーして新しいものと組み合わせる必要があります.
Object Assignと書きます.
targetは新しいobjectになります.source 1に既存のobjectを追加し、objectを追加します.また、キーとして変数を使用する場合は([]のようなカッコを使用して既存のデータ構造に追随できます).


3つのオブジェクトが結合されています.

オブジェクトの場合.配分がうまく理解できなければ、他に方法があります.ES 6の魔法.
{toDos}
말고
{...toDos} 를 해주면 object 의 내용을 받아 올 수 있다. 

これは、オブジェクトtoDosのコンテンツを再割り当てすることを意味します.

これにより、新しいobject newToDos 2が作成され、新しく作成されたobjectにはobjecttoDosが含まれます.すなわち,object内にobjectが重畳される.


携帯電話の入力値がよく届いていることを確認することができます.
今からtodosを描きましょうまずScollViewをインポートします.

このように書いたらどうしますか.
「一般アレイ」(Array)を使用する場合はmapを使用します.
Objectなら?どうしよう.
Object.キー(ターゲットオブジェクト)は、オブジェクトキーの配列を表します.Arrayを持っているのでここで地図を書くことができます

鍵を持ってきて、そこで地図を作ります.次に、マッピングされたオブジェクトがキー値であるため、Objectyは再びキー値に基づいてvalueを呼び出します.

Object.keysとmapの組合せはTextコンポーネントを返すことを作成した.


出力がこうなっているのが見えます.今から飾りましょう!

colors.jsに通常の色値を加算します.

このようにCSSを飾ると.
画面がよく見えるまたScollViewです.