デザインは...何の才能もないみたい...

1.

今日はまだ私にできることがないので、Tutorialによく出てくるToDoListを作りました
TSを熟知するために、各種公式文書を使用しています.
React Nativeは、制約の多いコンポーネントから構成されているようです.
直接打ち込んだ後は「propsです」これは、作成されたcomponentフレームワークが実行時のReactとは異なり、内部を塗りつぶすために使用されるためかもしれません.
だからpropsのkeyとvalueをあげることができます
これが端末サービスのせいかどうかはわかりませんが、どんな場合でも実行時にエラーは発生しないと思います.
コンポーネント内部論理で伝達されるpropsを使用しないので、問題はないはずです.
また、React Nativeにはさまざまなコンポーネントがあります.公式ドキュメントにはこれらのコンポーネントが非常に友好的にリストされていますが、今日Tutorialで使用されているコンポーネントは4～5個ほどあります.
私はできるだけ早くすべてのコンポーネントを見抜くことができることを望んでいます.

2.

きょうはハーモニーがある
実際には、コードが文字セットよりも長くないため、非常に困難なレベルです.

import React, {useState} from 'react';
import {
  Platform,
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  TextInput,
  Button,
} from 'react-native';
import {ToDos} from './ToDos';

export type ToDosProps = {
  toDos: IToDo[];
  setToDos: Function;
};

export interface IToDo {
  id: number;
  text: string;
  completed: boolean;
}

const handleSubmit = (
  inputValue: string,
  toDos: IToDo[],
  error: Boolean,
  setToDos: Function,
  setinputValue: Function,
) => {
  if (inputValue && !error) {
    setToDos([
      ...toDos,
      {
        id: toDos.length !== 0 ? toDos[toDos.length - 1].id + 1 : 1,
        text: inputValue,
        completed: false,
      },
    ]);
    setinputValue('');
  } else {
    setinputValue('');
  }
};

export const TodoList = () => {
  const [inputValue, setinputValue] = useState<string>('');
  const [toDos, setToDos] = useState<IToDo[]>([]);
  const [error, setError] = useState<Boolean>(false);

  const {toDoListContainer, mainTitle, inputContainer, taskInput, taskTitle} =
    styles;

  return (
    <SafeAreaView style={toDoListContainer}>
      <Text style={mainTitle}>Todo List</Text>
      <View style={inputContainer}>
        <TextInput
          style={taskInput}
          placeholder="Type your plan - by typeS"
          value={inputValue}
          onChangeText={(e: string): void => {
            setinputValue(e);
            setError(false);
          }}
          placeholderTextColor="#fff"
        />
        <Button
          color="#000"
          title="Add Task"
          onPress={() => {
            handleSubmit(inputValue, toDos, error, setToDos, setinputValue);
          }}
        />
      </View>
      <View>
        {toDos[0] && <Text style={taskTitle}>오늘 할 일</Text>}
        {toDos[0] && <ToDos toDos={toDos} setToDos={setToDos} />}
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  toDoListContainer: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'stretch',
    paddingTop: Platform.OS === 'android' ? 25 : 0,
    backgroundColor: '#4b7bec',
  },

  mainTitle: {
    marginBottom: 30,
    color: '#fff',
    fontSize: 36,
    fontWeight: '300',
    textAlign: 'center',
  },

  inputContainer: {
    alignItems: 'center',
  },

  taskInput: {
    height: 80,
    color: '#fff',
    fontSize: 25,
  },

  taskTitle: {
    marginTop: 20,
    marginBottom: 25,
    marginLeft: 20,
    fontSize: 25,
  },
});

まずメインコンポーネントとなるToDoListコンポーネントです.
文法はtsxを使いましたが、昨日悩んだunionはstylesとは全く関係ありません.
これらのファイルを作成すると、次のことが考えられます.

React useState->不変のコードを記述します.(RNもそうです.)

ES 6でparameter default値を指定するようにtypeを指定できます.

interfaceとtypeをエクスポートするのは想像以上に役に立ちます.

問題はどのように管理されているのか、明日はd.ts・declare module・namespace・などの概念を学びます.

import React from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';
import {IToDo, ToDosProps} from './TodoList';

const handleComplete = (
  toDos: IToDo[],
  setToDos: Function,
  idx: number,
): void => {
  const newToDos: IToDo[] = [...toDos];
  if (newToDos[idx].completed) {
    newToDos.splice(idx, 1, {...newToDos[idx], completed: false});
  } else {
    newToDos.splice(idx, 1, {...newToDos[idx], completed: true});
  }
  setToDos(newToDos);
};

const deleteToDo = (toDos: IToDo[], setToDos: Function, idx: number): void => {
  const newToDos: IToDo[] = [...toDos];
  newToDos.splice(idx, 1);
  setToDos(newToDos);
};

export const ToDos: React.FC<ToDosProps> = ({toDos, setToDos}) => {
  const {taskBox, task} = styles;

  const toDoList = toDos.map((toDo: IToDo, idx: number) => {
    return (
      <View style={taskBox} key={'toDo' + toDo.id}>
        <TouchableOpacity
          onPress={() => {
            handleComplete(toDos, setToDos, idx);
          }}>
          <Text style={task}>{toDo.completed ? '✔️' : '😂'}</Text>
        </TouchableOpacity>
        <Text style={task}>{toDo.text}</Text>
        <TouchableOpacity
          onPress={() => {
            deleteToDo(toDos, setToDos, idx);
          }}>
          <Text style={task}>❌</Text>
        </TouchableOpacity>
      </View>
    );
  });

  return <>{toDoList}</>;
};

const styles = StyleSheet.create({
  taskBox: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginRight: 20,
    marginBottom: 15,
    marginLeft: 20,
  },

  task: {
    fontSize: 20,
  },
});

次にサブアセンブリToDosです.tsxファイル.
同じ考えが続く.

TS&RNコンビネーションでは、機能コンポーネントを使用する場合、propsもタイプを決定します.

まずはReactFCタイプを使用して関数コンポーネントを定義する場合は、propsのタイプも同時に定義する必要があります.React.FC<CustomType or interface>

これを知らず何度も見たchildren?これはジェニーンリックを埋め込む方法かもしれませんが、もっと詳しくは、ライブラリを恐れなければ知りません.

定義関数はこれですか?たくさん書きました

Reactを基準にコンポーネント分離が行われていますが、RNも同じですか?

などなど.
TSとRNにはまだ詳しくありませんが、今週中にFirebase連動と管理を実現するために努力しなければならないと思います.
では、次の文章はもっと良い姿で戻ります.
ありがとうございます.