22.12.29) expo설치,React native(ui)를 배운 44일차

#오늘 배운 것

 

Expo 설치

//Vscode에서 
yarn add install -g expo-cli
expo login --username "Expo 사이트 가입당시 입력한 name"
expo init 앱이름
cd 앱폴더
expo start로 생성된 QR코드를 expo앱에서 켜기

/$ react-native --version으로 네이티브 앱 버전을 확인 가능하다

결과물 : expo request time out오류 발생....

이후  expo start --tunnel 명령어로 재실행되어 expo앱에서 실행 완료

 

native에서 rn의 경우 px단위를 붙이지 않는다.

버튼을 만들 때는 button을 쓰지 않고,TouchableOpacity을 사용한다.
※버튼의 경우 style의 제한이 많기 때문에 TouchableOpacity을 쓸것!!!!!

 

react native는 image주소를 가져올 때 src 대신 source로 처리한다.

image:soure={{uri : 이미지주소}} width와 height도 설정을 해야하는 이미지도 있다.

네이티브는 event객체가 들어가지 않고, 그냥 text값만 들어간다.

 

 

리액트는 JS의라이브러리였다...

 

리액트 dom을 통해 리액트가 웹어플리케이션으로 작업이 가능했다.

네이티브는 모바일 앱으로 사용이 가능하다.

리액트 네이티브는 원래 brige를 통해 연결됏었지만 현재는 brige없이도 소통이 된다

 

윈도우로 ios 개발하기엔 불가능하다. mac으로만 가능

 

expo의 간단한 셋업은 가능하지만 단점은... native코드 수정이 안된다...react를 하다가 native를 생성할 수도 있다...

crna간단한 expo툴킷으로 만들 수 있는 보일러 플레이트,,,

 

웹은 <div>, 앱은<view>이다.안에 내용도 따로 <text>잡아넣어야 작동.

scrollView를 적용하지 않으면 overflow가 적용이 되지않는다. 밑의 내용을 그냥 사라짐...그리고 style로는 적용안된다.

contentContainerStyle로 적용할수있다.

import {  ... ScrollView,} from 'react-native';

scrollView는 import해야지 사용가능. 안했다가 오류봄...

scrollview에서는 alignItems 속성이 적용 안되는 듯 하다.

스마트폰위의 메뉴창이 안가려질수있는 방법 safeAreaView를 사용하면 메뉴가 겹치지 않는다.최상위컴포넌트로 사용할 것.근데 아이폰만 적용된다.

 

스타일링 방법

• inline styling ( 태그안에 적용하는 방식)
• StyleSheet ( const를 활용한 방식) styleSheet를 붙이면 자동완성되서 편하다... px아닌것들은 문자열로 써줘야함.
• Styled Component( 이거대신 emotion native를 쓸것을 권장함.자동완성됨.대신 설치 필요.ui처리할때 속도 빠름.)
• emotion native안쓰고 자동완성을 원하면 vscode 스타일 컴포넌트 익스텐션 확장 프로그램 설치해야한다.

ios와 안드로이드 스타일을 다르게 줘야하기 때문에  StyleSheet,inline styling 두가지를 쓸수도 있다..

//설치
yarn add @emotion/react @emotion/native
//import
import styled, { css } from '@emotion/native'

• Tailwind ( 부트스트랩과 비슷하다.설정양이 많아 공홈에서 확인하자.)

https://www.nativewind.dev/quick-starts/expo

Expo | NativeWind

 

onClick대신 네이티브는 onPress이다. 마우스를 안누르고 터치형식이라서

 

 

//작업한 투두리스트 UI

import { StatusBar } from "expo-status-bar";
import {
  SafeAreaView,
  StyleSheet,
  Text,
  TextInput,
  Button,
  View,
  TouchableOpacity,
} from "react-native";
import { AntDesign } from "@expo/vector-icons";

export default function App() {
  return (
    <View style={styles.container}>
      <SafeAreaView style={styles.headerText}>
        <TouchableOpacity style={styles.HeaderButton}>
          <Text>Javascript</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.HeaderButton}>
          <Text>Javascript</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.HeaderButton}>
          <Text>Javascript</Text>
        </TouchableOpacity>
      </SafeAreaView>
      <TextInput
        style={styles.TextInput}
        placeholder="아무거나 입력해주세요."
      />
      <View style={styles.bodyContainer}>
        <Text style={styles.Todo}>
          ㅁㄴㅇㄴㅁㅇㅁㅇㅁㅈㅇㅁㅈㅇ
          <AntDesign name="edit" size={24} color="black" />
          <AntDesign name="checkcircleo" size={24} color="black" />
          <AntDesign name="delete" size={24} color="black" />
        </Text>
        <Text style={styles.Todo}>
          ㅁㄴㅇㄴㅁㅇㅁㅇㅁㅈㅇㅁㅈㅇ
          <AntDesign name="edit" size={24} color="black" />
          <AntDesign name="checkcircleo" size={24} color="black" />
          <AntDesign name="delete" size={24} color="black" />
        </Text>
        <Text style={styles.Todo}>
          ㅁㄴㅇㄴㅁㅇㅁㅇㅁㅈㅇㅁㅈㅇ
          <AntDesign name="edit" size={24} color="black" />
          <AntDesign name="checkcircleo" size={24} color="black" />
          <AntDesign name="delete" size={24} color="black" />
        </Text>
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#ffcc00",
    flexDirection: "column",
    flex: 1,
  },
  headerText: {
    flexDirection: "row",
    justifyContent: "space-around",
    marginTop: 50,
  },
  HeaderButton: {
    alignItems: "center",
    justifyContent: "center",
    width: 100,
    height: 50,
    backgroundColor: "#cccc00",
    fontSize: 30,
  },
  TextInput: {
    marginTop: 20,
    width: 350,
    height: 40,
    marginLeft: 30,
    borderRadius: 10,
    borderColor: "gray",
    borderWidth: 1,
  },
  bodyContainer: {
    backgroundColor: "#FDF5DC",
    paddingHorizontal: 20,
    marginVertical: 30,
    flex: 1,
  },
  Todo: {
    justifyContent: "center",
    marginTop: 20,
    marginBottom: 10,
    paddingHorizontal: 10,
    height: 50,
    borderRadius: 10,
    backgroundColor: "#ffcc00",
  },
});

 

 

 

#내일 할것

과제 :투두리스트 똑같이....만들기..기능 안넣어도 됨 . 만들기만 하기

내일 투구리스트 준비하면 타임어택으로 로직 붙이는 시간을 주신다고 한다....로직은 발제에 있다..