내일배움캠프 React트랙 43일차 회고 (2022.12.29)

Expo Setup

npm install --global eas-cli 오류시 sudo npm install --global eas-cli 로 설치

eas init --id a2901174-6e56-470e-8f2c-2c95235f301f 은 cd를 통해 해당프로젝트경로로 접속한 후 해주기

여기까지 npm으로 설치가 되었더라도 yarn start를 사용할 수 있음

배포할때는 eas update를 통해 배포하면됨 

---

React Native 주요 UI 컴포넌트

출처: https://reactnative.dev/docs/intro-react-native-components

• <div>태그는 <view>태그임 View 는 기본적으로 flexBox 이며 default flex-direction은 column 이다.
• 글자는 반드시 <text>로 감싸준 뒤 글자를 입력해야함html의 <p>태그와 비슷함
• 이미지는 <img src=""/>가 아니라 아래의 코드와 같은 방식으로 작성함
  • image를 로컬저장소에서 불러올때는 위의 코드, url주소로 불러올때는 아래의 태그로 작성한다.

      <Image
        style={styles.tinyLogo}
        source={require("@expo/snack-static/react-native-logo.png")}
      />
      <Image
        style={styles.tinyLogo}
        source={{
          uri: "https://reactnative.dev/img/tiny_logo.png",
        }}
      />

React Native에서 image는 스타일을 지정하지 않을 시, 화면에 표시되지 않는다.

 

<TextInput/>

  const [text, setText] = useState("");
  const onChangeText = (text) => {
    setText(text);
  };

<ScrollView/>

<SafeAreaView/>

---

스타일링

inline styling

import React from "react";
import { Text, View } from "react-native";

const App = () => (
  <View style={{ marginTop: 10, flex: 1 }}>
    <Text>React Native</Text>
  </View>
);

styleSheet

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const App = () => (
  <View style={styles.container}>
    <Text>React Native</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    marginTop: 10,
		flex: 1
  }
)

Styled Component

VS CODE Extension 중: vscode-styled-components 설치 필요 (자동완성 목적)

yarn add @emotion/react @emotion/native

import { Text } from "react-native";
import styled from '@emotion/native'

// VS CODE Extension 중 vscode-styled-components 를 설치해야 css styling 자동완성 기능 이용 가능
const StyledView = styled.View`
  flex: 1;
	margin-top: 10px
`
const App = () => (
  <StyledView>
    <Text>React Native</Text>
  </View>
);

// 다크 모드 적용
import { useColorScheme } from "react-native"; // 현재 디바이스가 light mode 인지 dark mode 인지

---

오늘 만든 과제