スパルタエンコーディングクラブは明日勉強するアプリケーションの開発を2週間します.

JSXを使用したクライアント画面の描画
反応本:Facebookで開発されたフロント開発技術
短所:「Push Notification/CAkoTalkログイン、Naverログイン」などを作成するには、Expo Androidとiosのコードを別々に知る必要があります
Expo Androidやiosのコードを知ることなくJavaScriptを使用して開発し、「NPM」でインストール(cmdから「npm install-g expo-cli」)するツールボックスです
Expo Clientアプリケーション:作成中のアプリケーション画面を2 Dコードで表示する
NPM:既存のJavaScriptをインポートするための有用なツールです.
YARN:NPMをより良く利用するためにツールNPMで実装可能(cmdから「npm install-g糸」への実装)
cmdにexpoコマンドをインストールする->万博にログイン->vsコードを開く->デフォルトアプリケーションをexpo initに設定->cdコマンドフォルダを変更->expoで万博を実行する
携帯電話にインストールされているexpo-clientアプリケーションを使用してexpoアプリケーションを実行します(ノートパソコンと携帯電話は同じインターネットを使用する必要があります)
フォルダの説明
1.assist:画像資料の保管場所
2.node modules:ツールボックス
3. App.js:javascript作成画面の場所
4. app.json:アプリケーション・ユーザー・ガイド
JSX構文
<>形式のタグ(エンティティ)構文を使用してスクリーンを描画する
->APPという関数で画面に描画(レンダリング)
反応器の中の道具は出さなければならない.
import { StyleSheet, Text, View } from 'react-native';
公式ユーザーズマニュアルを使う:開いたラベルや自分で閉じたラベルなど
各ラベルには、ラベル全体を包み、全体を包む()小包が必要です.
コメントとして使用する単語を選択し、ctrl+/を押してコメントまたは/**/
学習JSXラベル:react-ネイティブから取り出して書き込み、スケルトンを作成する
Viewtag:画面上の領域設定、スタイルコードは画面上に表示されます.
Text tag:文字はテキストタグに書かなければならない
Scroll view:スクロールして画面のすべての内容を表示
以前に作成したコードを保存し、後で必要に応じてコピーして貼り付けることができます.
button tag:スタイルまたはtitle、color、関数(onPress)を貼り付けることができます.
関数をonPressに直接貼り付けることができます
ex)onPress={関数名}
ex) onPres={()=>{
関数名()
}}
TouchableOptivity:特定の領域の周囲でボタンのように動作するラベル.
image tag:asset上のimageを取得し、プロパティを使用して描画
本書によって自分の方向に修飾する
外部画像のインポート:source={uri:
source={{uri:' https://images.unsplash.com/photo-1424819827928-55f0c8497861?fit=crop&w=600&h=600%27'}}
ラベルにはそれぞれのプロパティがあります
Style=Style sheet関数を使用してクローゼットを作成する->下部構造にcontainerなどがある->Styleという変数を適用する部分にEx Styleを追加します.container
一般的なスタイル
export default function App() {
return (
スパルタコードクラブ!!
);
}
const styles = StyleSheet.create({
container: {
//エリアのプロパティをキャプチャします.詳細を別に説明する.
//flex:1は全画面表示
flex: 1,
//エリアの背景色を確定する
backgroundColor: '#fff',
//次の2つのプロパティは、領域内のコンテンツの位置を決定します.
詳細//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"
Flex
export default function App() {
return (

  </View>
  <View style={styles.containerTwo}>
    <View style={styles.innerOne}>

    </View>
    <View style={styles.innerTwo}>

    </View>

  </View>
</View>

);
}
const styles = StyleSheet.create({
container: {
flex:1
},
containerOne: {
flex:1,
backgroundColor:"red"
},
containerTwo:{
flex:2,
flexDirection:"row",
backgroundColor:"yellow"
},
innerOne: {
flex:1,
backgroundColor:"blue"
},
innerTwo: {
flex:4,
backgroundColor:"orange"
}
});
//containerにはcontainer Oneとcontainer Twoがあり、container TwoにはinnerOneとon==innertwoがあり、container 1,2とinnerは各数字の和を分母とし、鶴のそれぞれの数字を分子の点数として領域を取得する.上記の例ではcontainerOneは1/3の領域である(containerの1は全体を表す)
//flexDirectionは方向によってcolumnが上、下/rowが左、右の領域に分けられます
注)親領域:他の領域を囲む<->子領域
アプリ作成のスタート地点
import React from 'react';
import main from './assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
export default function App() {
return ()
}
const styles = StyleSheet.create({})
alignSelf:center->flexを指定せずに中央揃え
export default関数app(){->他のページへの書き込みを許可するコード
他の場所からデータをインポートするコード'./ファイル名'->が同じフォルダにある場合
'../ファイル名"->外部フォルダ内の場合
JSX構文で変数を書くには{}で囲みます