2つ目のグループプロジェクトはReact-Nativeでニンジンスーパーをクローンすることにした.
Reactでは知らないことが多く実力も足りないですが、新しいことに挑戦するのはいつも楽しいと思います.こうして始まるRN...終日ターミナルで血が流れて...ううう

初期設定

ReactNativeでは、初期設定はNavigation構造を完了します.
メンバー(AS期最賢)と2日間悩んで作った仕組みです.(写真の出所-張賢のブログ)

React Navigation

以下はReact Navigationの公式ドキュメントから抜粋します.
簡単に言えば、リンクされたページにアンカーラベル(<a>)を使用してWebブラウザで移動できます.ユーザーがリンクをクリックすると、URLがブラウザ履歴スタックにプッシュされます.ユーザーが戻るボタンを押すと、ブラウザはスタック履歴の最後のページからポップアップして前のページに戻ることができます.React Nativeでは,Webブラウザのようにグローバルヒストリスタックに対する内蔵機能がないため,React Nativationが生成される.
アプリでは画面間の移動が画面に溜まり、後ろに進むと下の画面に戻ります.
したがってRNでの初期設定はNavigtion設計である.つまり,アプリケーション全体の構造を把握していると考えられる.

Hello React Navigation

In a web browser, you can link to different pages using an anchor ( <a> ) tag. When the user clicks on a link, the URL is pushed to the browser history stack. When the user presses the back button, the browser pops the item from the top of the history stack, so the active page is now the previously visited page. React Native doesn't have a built-in idea of a global history stack like a web browser does -- this is where React Navigation enters the story.
React Navigation's stack navigator provides a way for your app to transition between screens and manage navigation history. If your app uses only one stack navigator then it is conceptually similar to how a web browser handles navigation state - your app pushes and pops items from the navigation stack as users interact with it, and this results in the user seeing different screens. A key difference between how this works in a web browser and in React Navigation is that React Navigation's stack navigator provides the gestures and animations that you would expect on Android and iOS when navigating between routes in the stack.
Lets start by demonstrating the most common navigator, createStackNavigator .

関数構成部品、styled-componses

import React from "react";
import { StyleSheet, Text, View, Button, Dimensions } from "react-native";
import styled from "styled-components/native";
import { flexRowMarginXView } from "../styles/mixin";

const TownInfo = ({ navigation, route }) => {
  return (
  <Container>
    <InnerContainer>
      <Text>TownInfo</Text>
    </InnerContainer>
  </Container>
  );
};

export default TownInfo;

const Container = styled.View`
  flex: 1;
  background-color: white;
`;

const InnerContainer = styled.View`
  ${flexRowMarginXView}
  background-color: white;
  border-bottom-color: white;
`;

styled-components

まずstyled-connts妖女石を使うのはあまり問題ありません.1行の内線スタイルも許されない官熙のコメントを見ていると、緊張していますが、最終的にはやるべき過程で、よく使うスタイルは別のスタイルファイルを作成して管理し、必要に応じて継承して使うこともできます.

関数構成部品

関数型構成部品...ほほほ、まずは始まりました.関数はもともとよく使われているので難しくないのではないでしょうか.考えている私.
予想通り関数だけpropsはもともとよく使われていて、大丈夫ですが、stateはありません...useStateというやつがいました.関数型素子を学習すると、Hooks…?私はずっとこいつに会います.Hooksの内容については、後でもっと冗長なまとめが必要になるかもしれません.useState度Hooksのうちの1つだということを知っておきましょう.

import React, { useState } from "react";
{...}
  const [body, setBody] = useState({
    name: "",
    price: "",
    description: "",
    access_range: 1,
  });

  const updateData = (data) => {
    setBody({
      ...body,
      [data.type]: data.value,
    });
  };
{...}

上のコードはbodyというstateを作成します.
現在の構成部品のサブ構成部品でbodyを変更するために、updateDatad()関数が作成されます.
こうして関数型素子が始まりました.
しかし数日後、私は他のHooks人と顔を合わせました.
このように自然に次のPostingをします~