리액트 네이티브 첫 수업 (실시간 강의) 정리 #1

import { StatusBar } from "expo-status-bar";
// react-native에서 임포트 해와야한다.
// react-native에서 쓰는 ui태그들은 받아와야 한다.
// <Image source={require("./assets/icon.png")}>
import { useState } from "react";
// 외부 url 가져올땐  <Image source={{uri : ""}}/>
import { StyleSheet, Text, View, Image, TextInput } from "react-native";
// ScrollView를 쓸때는 contentContainerStyle을 써야된다.

// emotion이거 까신거 같음 styled 쓰려고
// import styled from "@emotion/native"
// const StyledText = styled.Text `font-size:100px, background-color : gray`;
// const StyledButton = styled.Button ` `
// button은 title이 무조건 있어야된다넹??
// onPress가 있다네

//항상 최상위는 SafeAreaView가 유용
// 노치?? 노치가 있는걸 고려하면 SafeAreaView를 쓰라고 하셨는데 노치가 머야

// <테일윈드> 는 부트스트랩 같은거래
// className에 nativewind
// tailwind 설치
// 설정도 해야됌

export default function App() {
  const [text, setText] = useState("");


  return (
    // div를 view라고 쓰는 구나!
    // View를 임포트해서 SafeAreaView로 쓰시라고 하심
    // <SafeAreaView>
    <View style={styles.container}>
      <Text style={{ color: "green", fontSize: 20 }}>리액트 네이티브</Text>
      <Text>Hello ~~~ 꿔까 </Text>
      <Text>실시간 업로드 되닝? 누가 더 빠르닝</Text>
      <TextInput
        style={{ backgroundColor: "yellow", width: 80 }}
        onChangeText={setText}
        value={text}
      />
      <Text>여기 input 뜬당 : {text}</Text>

      <Image
        style={{ width: 100, height: 100, borderRadius: 30 }}
        source={require("./assets/test2.jpg")}
      />

      {/* <TextInput onChangeText={setText} value={text} /> */}
      {/* <Image style={{ width: 100, height: 100 }} uri={{}} /> */}
      <StatusBar style="auto" />
    </View>
  );
}

// styles.container
// styles.wrapper
// const styles = {  wrapper : { width: 10 } , }
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

// container가
// 기본적으로 flex박스이다.

// StyleSheet를 임포트해서 StyleSheet.create 로 사용하면
// '자동완성'기능이 편해진다.
const stylee = StyleSheet.create({
  wrapper: {
    fontSize: 100,
  },
});