アプリケーション開発総合クラス2週目
7479 ワード
□[王超宝]私の収益性アプリケーション、アプリケーション開発総合クラス(第2週課程)
~22.3.19(土)[チーム種目のため、2週間のショットタイムがいっぱい]
ノード、npmインストール 糸取付 Expo登録とローカルアカウント設定 htmlにおいてbody等の機能を有する htmlとの最大の違いは、タグ をインポートする必要があることである.には複数のラベルがあります
ex) View , Text , ScrollView , Button , TouchableOpacity , Image スタイルシートの使用-htmlに類似するcssの機能 を有する. googlingとドキュメントページを参照してください
https://reactnative.dev/docs/image#docsNav スタイルの文書
https://reactnative.dev/docs/style#docsNav
https://reactnative.dev/docs/layout-props 内容
~22.3.19(土)[チーム種目のため、2週間のショットタイムがいっぱい]
◇本機とExpoに応答して運転
◇JSX文法
ex) View , Text , ScrollView , Button , TouchableOpacity , Image
https://reactnative.dev/docs/image#docsNav
◇常用スタイルシート
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"
https://reactnative.dev/docs/style#docsNav
https://reactnative.dev/docs/layout-props
◇スクリーンレポート作成
Reference
この問題について(アプリケーション開発総合クラス2週目), 我々は、より多くの情報をここで見つけました https://velog.io/@gwichanlee/앱개발-2주차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol