アプリケーション開発総合クラス3週目
7320 ワード
□[王超宝]私の収益性アプリケーション、アプリケーション開発総合クラス(3週間コース)
22.03.21(月)まで
1)構成部品:指定した構成部品(要素)を使用して作成された画面の一部
2)ステータス(State):コンポーネント内のデータのメンテナンスと管理の唯一の方法==直接使用するデータ!
3)属性(Props):親コンポーネントから子コンポーネントにデータを渡す方法==直接データを渡す!
4)userEffect:画面に構成部品を描画するときに最初に実行する関数の集合.
画面のすべての部分 を複数の部分に分けて組み合わせることで、管理が容易になる .
は、コンポーネント に簡単にデータを転送する.このアクセサリーが生まれた時から持っていた
属性を持つ コンポーネント所有/管理データ ユーザインタフェース(UI)は、構成部品(構成部品)内のどのデータ(ステータス)が注入され、変更されるかによって変化する. 画面を描画した後、実行する関数を作成した場合は、まず関数を実行します. 画面の描画プロセス
1)画面が描かれる
2)useEffectはstateでuseStateを使用してデータを更新する
3)ステータス(state)が変更され、画面が に再描画されます.を描くときに用意されていないデータ!?エラー 特定の状態値により、n秒後に値を変更し、ロード前に画面を表示させ、表示したい画面を表示させる.
インストールライブラリ ライブラリ を使用以外のスタイルは、正式なドキュメントを参照してください.
https://docs.expo.dev/versions/latest/sdk/status-bar/ のWebサイトのように、アプリケーションは作成したコンポーネントをページ化し、これらのページ間を移動できるライブラリ インストールライブラリ スタックナビゲーション
構成部品ページ機能を付与し、構成部品から構成部品、すなわちページへの移動を可能にする. 公式文書を参照し、Stack NavigatorのScreenOptionを設定します.https://reactnavigation.org/docs/stack-navigator/#props
22.03.21(月)まで
◇アプリケーションに必要な基礎知識
1)構成部品:指定した構成部品(要素)を使用して作成された画面の一部
2)ステータス(State):コンポーネント内のデータのメンテナンスと管理の唯一の方法==直接使用するデータ!
3)属性(Props):親コンポーネントから子コンポーネントにデータを渡す方法==直接データを渡す!
4)userEffect:画面に構成部品を描画するときに最初に実行する関数の集合.
◇セット
◇属性(Props)
属性を持つ
◇状態(State)
◎ useEffect
사용방법
useEffect(()=>{
...화면이 그려진 다음 가장 먼저 실행되야 할 코드 작성 공간
},[])
ex>
const [state,setState] = useState([])
useEffect(()=>{
setState(data)
},[])
◇スクリーンをロードする必要がある
1)画面が描かれる
2)useEffectはstateでuseStateを使用してデータを更新する
3)ステータス(state)が変更され、画面が
◇ステータスバー
インストール
expo install expo-status-bar
import { StatusBar } from 'expo-status-bar';
<StatusBar style="black" />
https://docs.expo.dev/versions/latest/sdk/status-bar/
◇ナビを使う
yarn add @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
構成部品ページ機能を付与し、構成部品から構成部品、すなわちページへの移動を可能にする.
yarn add @react-navigation/stack
import React from 'react';
//설치한 스택 네비게이션 라이브러리를 가져옵니다
import { createStackNavigator } from '@react-navigation/stack';
//페이지로 만든 컴포넌트들을 불러옵니다
import DetailPage from '../pages/DetailPage';
import MainPage from '../pages/MainPage';
//스택 네비게이션 라이브러리가 제공해주는 여러 기능이 담겨있는 객체를 사용합니다
//그래서 이렇게 항상 상단에 선언하고 시작하는게 규칙입니다!
const Stack = createStackNavigator();
const StackNavigator = () =>{
return (
//컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다.
//위에서 선언한 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>
)
}
export default StackNavigator;
//navigation 객체가 가지고 있는 두 함수(setOptions와 navigate)
//해당 페이지의 제목을 설정할 수 있음
navigation.setOptions({
title:'나만의 꿀팁'
})
//Stack.screen에서 name 속성으로 정해준 이름을 지정해주면 해당 페이지로 이동하는 함수
navigation.navigate("DetailPage")
//name 속성을 전달해주고, 두 번째 인자로 딕셔너리 데이터를 전달해주면, Detail 페이지에서
//두번째 인자로 전달된 딕셔너리 데이터를 route 딕셔너리로 로 받을 수 있음
navigation.navigate("DetailPage",{
title: title
})
//전달받은 데이터를 받는 route 딕셔너리
//비구조 할당 방식으로 route에 params 객체 키로 연결되어 전달되는 데이터를 꺼내 사용
//navigate 함수로 전달되는 딕셔너리 데이터는 다음과 같은 모습이기 때문입니다.
/*
{
route : {
params :{
title:title
}
}
}
*/
const { title} = route.params;
◇シェアリング機能
import { Share } from "react-native";
const share = () => {
Share.share({
message:`${tip.title} \n\n ${tip.desc} \n\n ${tip.image}`,
});
}
◇リンク接続の適用
expo install expo-linking
import * as Linking from 'expo-linking';
const link = () => {
Linking.openURL("https://spartacodingclub.kr")
}
Reference
この問題について(アプリケーション開発総合クラス3週目), 我々は、より多くの情報をここで見つけました https://velog.io/@gwichanlee/앱개발-종합반-3주차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol