📕 3番目のログ

[ログの内容]

アプリケーション開発の反応基盤

StatusBar

React-navigation

💡 反応の基礎概念

反応ネイティブアプリケーションを作成するには、少なくとも4つの反応概念を理解する必要があります.

「構成部品」(Component):指定したエンティティを使用して作成された画面の一部

≪ステータス｜Status｜ldap≫:構成部品内のデータのメンテナンスおよび管理に関する唯一の方法
==使用するデータのみ

プロパティ(Props):親構成部品から子構成部品にデータを渡す方法
==データの直接転送

userEffect:画面に構成部品を描画するときに最初に実行する関数の集合.

🔍 構成部品

コンポーネントは、UIの要素、要素を再利用可能な部分として彫刻操作する技術である.
反応をもとに作成されたフェイスブックサイトが運営する要素は数万種類あるという.

コンポーネントは、画面のすべての部分です.
いわゆる素子アプリもありますjsの大きなapp関数のように、コード全体を囲む関数を意味します.
1つのボタンは構成部品であってもよく、1つのボタンセットの領域は構成部品であってもよい.

は、通常、コンポーネントフォルダにコンポーネントを配置して管理します.

🔍 ステータス(State,useState)

コンポーネントごとにデータを保持および管理できます.データと呼ぶことができ、
反応器は、素子に保持/管理されたデータを状態と呼ぶ.

反応器では、ステータス(state)は、反応器ライブラリから提供されるユーザステータスによって作成される.
setState関数を使用して定義/変更できます.(UI = component(state))

🔍 プロパティ(Props)

プロパティは、データを構成部品に渡すことを示しており、これは容易に理解できる.
そのイメージは身長と鈴類の形.

プロパティには難しくないルールが隠されています.

素子に属性(データ)を付与伝達する場合、
キーとbellクラス(content={content})で伝えるのは

です.

要素を繰り返すと、各要素は一意になります.
mapのインデックス(i)がkey={i}属性伝達の形で挿入されていることを確認します.

🔍 useEffect(画面描画後に最初に実行される関数)

useEffectは、非常に簡単で非常に有用な応答内蔵関数です.
これは画面を描いた後に最初に実行する関数です.

useEffect(()=>{
...화면이 그려진 다음 가장 먼저 실행되야 할 코드 작성 공간
},[])

通常、useEffectはデータの準備に使用されます.
データを準備し、
これは、サーバまたはどこかからデータを受信し、ステータスに反映することを意味します.
主に次の手順で構成されています.

描画

画面

UseEffect準備データ

状態データ更新、画面再描画

💡 ステータスバー

アプリケーションは、アプリケーションによっては一番上のステータスバーを移動するアプリケーションがあります.
ステータスバーとは、このようなものです.私たちが毎日見ている

🔍 StatusBar

Expoステータスバーのインストール

expo install expo-status-bar

//import
import { StatusBar } from 'expo-status-bar';

//사용
<StatusBar style="black" />
//style 이 light 일 때와, black 일 때가 다르다.
// 배경색이 검은색일 경우 위와 같이 스타일을 설정하면 상태 바가 같은 블랙이므로 보이지 않는다.

ステータスバーは、異なるコンポーネントに適用したり、アプリケーション全体に適用したりできます.

ステータスバーのプロパティは、公式ドキュメントに複数存在します.

Status Bar公式ドキュメント

💡 React-navigation(ナビゲータ、ナビゲータ)

アプリケーションにページコンセプトを追加してWebサイトを使用するように、
アプリケーションで作成したコンポーネントをページングします.
各ページ間の移動を許可するライブラリ.

react-navigation公式ドキュメント

レスポンスナビゲーションライブラリもExpoでサポートされているツールです.
Expoとの併用に適しています.

//네비게이션 설치 코드
//yarn
yarn add @react-navigation/native

//네비게이션 추가 설치코드
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-navigation/native

🔍 スタックナビゲーションとは?

スタックナビゲーションは、コンポーネントにページ機能を提供することができる.
コンポーネントからコンポーネント、すなわちページへの移動を許可します.

スタックナビゲータの正式なドキュメントリンク
構成部品をページングするスタックのナビゲーションは、次のとおりです.

ページでコンポーネントをページに包み、ページのように使用します.

作成した複数のページをすべてブックマーク機能付きスタックナビゲータに登録します.
ページをいつでも移動できるようにします.

ページはStackです.Screenと呼ばれています.
ブックマークはStackNavigatorと呼ばれています

//스택 네비게이터 설치 코드
yarn add @react-navigation/stack

🔍 スタックナビゲータコード解析

1.使用準備

import React from 'react';
//설치한 스택 네비게이션 라이브러리를 가져온다
import { createStackNavigator } from '@react-navigation/stack';
//페이지로 만든 컴포넌트들을 불러온다
import DetailPage from '../pages/DetailPage';
import MainPage from '../pages/MainPage';
//스택 네비게이션 라이브러리가 제공해주는 여러 기능이 담겨있는 객체를 사용한다
//그래서 이렇게 항상 상단에 선언하고 시작하는게 규칙
const Stack = createStackNavigator();

2.基本フレームワーク

//리액트의 모든 파일은 컴포넌트라 생각하고
//페이지 기능을 해주는 모든 기능이 담겨 있는 컴포넌트를 만든다 생각하자
const StackNavigator = () =>{
	return (
		/// 페이지 기능이 들어갈 곳
	)
}
export default StackNavigator;
'''

3.画面オプション

//컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언한다.
	//위에서 선언한 const Stack = createStackNavigator(); Stack 변수에 들어있는 태그를 꺼내 사용한다.
	//Stack.Navigator 태그 내부엔 페이지(화면)를 스타일링 할 수 있는 다양한 옵션들이 담겨 있다.
	<Stack.Navigator
		screenOptions={{
			headerStyle: {
				backgroundColor: "black",
				borderBottomColor: "black",
				shadowColor: "black",
				height:100
			},
			headerTintColor: "#FFFFFF",
			headerBackTitleVisible: false
		}}

		{/* 컴포넌트를 페이지로 만들어주는 엘리먼트에 끼워 넣는다. 이 자체로 이제 페이지 기능을 한다*/}
		<Stack.Screen name="MainPage" component={MainPage}/>
		<Stack.Screen name="DetailPage" component={DetailPage}/>
	</Stack.Navigator>

4.ページ接続

{/* 컴포넌트를 페이지로 만들어주는 엘리먼트에 끼워 넣는다. 이 자체로 이제 페이지 기능을 한다*/}
<Stack.Screen name="MainPage" component={MainPage}/>
<Stack.Screen name="DetailPage" component={DetailPage}/>

감사합니다 😊