アプリケーション2週目

ㅇJSX(JavaScript XML):ネイティブアプリケーション開発に対応する領域(レイアウト)をキャプチャする構文言語

//잠시 살펴보는 JSX !!!
//이렇게 상단에서 사용할 엘리먼트를 react-native 라이브러리로부터 꺼내 사용합니다.
import { Text, View } from 'react-native';
<View>
<Text>Hello, I am {props.name}!</Text>
</View>

ㅇExpo:
ノード.jsでjavascript開発環境を構築し、NPMに必要なjavascriptアプリケーション開発ツールをインポート
ㅇ糸取付

//도구를 가져와 설치하는 npm 의 설치 명령어 install과
//컴퓨터 어디서든 설치하고 있는 도구를 사용할 수 있게 해주는 -g 옵션 명령어
npm install -g yarn
//설치가 완료된다음
yarn -v

expo login --username "Expo 사이트 가입당시 입력한 name"
...
expo 패스워드 입력란이 차례로 나오고, 차례대로 입력하면 로그인 성공!

ㅇ万博start,クローズ時ctrl+c
ㅇMacはAndroid StudioとXcodeをインストール可能
ㅇExpoプロジェクトフォルダ構造

-assets:アプリケーションの実行とサービス時にデフォルトの画像とアイコンファイルを含むフォルダ.
-node modules:応答ネイティブとExpoを使用してアプリケーションを作成し、多くのライブラリをインストールする場所
-App.js:ネイティブアプリケーションの開始点とエントリポイントを反映します.アプリケーション画面の大きな関数を描画する(このライブラリとExpoが提供する機能を使用して画面の大きな関数を描画する)

-app.json:アプリケーションの基本情報を設定するファイルです.アプリケーションの名前、アプリケーションのリリースバージョン、アプリケーションが携帯電話にインストールされたときに表示されるアイコン、アプリケーションが開いたときに表示されるフラッシュスクリーン、アンドロイドまたはIOSのそれぞれの広告設定が含まれます.
ㅇレンダリング(Rendering):画面にJSX構文を描画する動作、動作
ㅇ反応本機公式文書:https://reactnative.dev/docs/view
ㅇExpo公式文書:https://docs.expo.io/versions/v38.0.0/react-native/view/
ㅇすべての装飾は小包の最上階の装飾が必要である.Ellimentはもうすぐ!ラベル<>

//App.js가 렌더링 하고 엘리먼트는 결국
//Text와 StatusBar엘리먼트를 감싸고 잇는 View입니다.
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}

下にラップされているレイヤーがない場合、エラーが発生します.

//View 엘리먼트 밖에 StatusBar가 나와 있으므로 엘리먼트 전체를 감싸는 엘리먼트가
//없어서 오류가 납니다.
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
<StatusBar style="auto" />
);
}

ㅇボタンドキュメント:https://reactnative.dev/docs/button
ㅇポップアップアラームマニュアル:https://reactnative.dev/docs/alert#docsNav
ㅇ画像ラベルユーザーガイド:https://reactnative.dev/docs/image#docsNav
ㅇすべてのタグに共通するstyles属性
-スタイルシートは最終的に、きれいな服を整理するオブジェクト(ディクシャナ)を作成します.このオブジェクトを使用して服を作成して整理し、JSXエイリアスで使用します.
-共通スタイルのプロパティ

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.textStyle}>스파르타 코딩클럽!!</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
//영역을 잡는 속성입니다. 따로 자세히 다룹니다.
//flex: 1은 전체 화면을 가져간다는 뜻입니다
flex: 1,
//영역의 배경 색을 결정합니다
backgroundColor: '#fff',
//아래 두 속성은 영역 안의 컨텐츠들의 배치를 결정합니다.
//flex를 자세히 다룰때 같이 자세히 다룹니다
justifyContent:"center",
alignContent:"center"
},
textContainer: {
//영역의 바깥 공간 이격을 뜻합니다(하단 이미지 참조)
margin:10,
//영역 안의 컨텐츠 이격 공간을 뜻합니다(하단 이미지 참조)
padding: 10,
//테두리의 구부러짐을 결정합니다. 지금 보면 조금 둥글죠?
borderRadius:10,
//테두리의 두께를 결정합니다
borderWidth:2,
//테두리 색을 결정합니다
borderColor:"#000",
//테구리 스타일을 결정합니다. 실선은 solid 입니다
borderStyle:"dotted",
},
textStyle: {
//글자 색을 결정합니다. rgb, 값 이름, 색상코드 모두 가능합니다
color:"red",
//글자의 크기를 결정합니다
fontSize:20,
//글자의 두께를 결정합니다
fontWeight:"700",
//가로기준으로 글자의 위치를 결정합니다
textAlign:"center"
}
});

ㅇREEXTスタイル公式文書
https://reactnative.dev/docs/style#docsNav
https://reactnative.dev/docs/layout-props
(Googleで「react native[必要なスタイル]」を検索)
ㅇFlex:アプリケーション画面の構成時に、エリアのレイアウト(エリアの属性を占める)を決定し、実際にFlexが最も重要である(Flexは相対的に)