[React Native 101] #3. Styles

~2.6 까지의 강의

이제 드디어 앱을 만들어 보도록 하자.

App.js

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.city}>
        <Text style={styles.cityName}>Seoul</Text>
      </View>
      <View style={styles.weather}>
        <View style={styles.day}>
          <Text style={styles.temp}>27</Text>
          <Text style={styles.description}>Sunny</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "tomato",
  },
  city: {
    flex: 1.2,
    justifyContent: "center",
    alignItems: "center",
  },
  cityName: {
    fontSize: 68,
    fontWeight: "500",
  },
  weather: {
    flex: 3,
  },
  day: {
    flex: 1,
    alignItems: "center",
  },
  temp: {
    marginTop: 50,
    fontSize: 178,
  },
  description: {
    marginTop: -30,
    fontSize: 60,
  },
});

우리가 있는 도시의 이름을 보여주고, 위치를 가져오도록 하자.
휴대폰의 지리적 위치를 가져오는 많은 function이 있다. 그리고 날씨 api는 응답해준다.
우리가 있는 도시 이름과 일기예보 array를 얻어야한다.

1. 스타일을 가지고 온다.
StyleSheet를 가지고 온다. 그리고 css를 container 안에 넣어준다.
style이 커지면 따로 파일을 만들어주면 된다.

2. Container를 만든다.
먼저, 도시이름을 가지고 오는 것이다. 그것은 정말 크게 할 것이고, 그 다음에 온도를 가지고 올 것이다.
만약 내가 저장했는데 작동하지 않는다면, expo가 실행되고 있는 콘솔에서 r을 눌러준다.
그러면 전체 어플리케이션이 refresh될 것이다.
그리고 cityname을 입혀야 한다.
도시 이름의 style로 준다.

실행화면

 

---

우리가 사용할 것은 ScrollView이다.
우리가 Scroll Down할 수 있게 해준다는 것이다.

App.js

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

const { width: SCREEN_WIDTH } = Dimensions.get("window");

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.city}>
        <Text style={styles.cityName}>Seoul</Text>
      </View>
      <ScrollView
        pagingEnabled
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.weather}
      >
        <View style={styles.day}>
          <Text style={styles.temp}>27</Text>
          <Text style={styles.description}>Sunny</Text>
        </View>
        <View style={styles.day}>
          <Text style={styles.temp}>27</Text>
          <Text style={styles.description}>Sunny</Text>
        </View>
        <View style={styles.day}>
          <Text style={styles.temp}>27</Text>
          <Text style={styles.description}>Sunny</Text>
        </View>
        <View style={styles.day}>
          <Text style={styles.temp}>27</Text>
          <Text style={styles.description}>Sunny</Text>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "tomato",
  },
  city: {
    flex: 1.2,
    justifyContent: "center",
    alignItems: "center",
  },
  cityName: {
    fontSize: 58,
    fontWeight: "500",
  },
  weather: {

  },
  day: {
    width: SCREEN_WIDTH,
    alignItems: "center",
  },
  temp: {
    marginTop: 50,
    fontWeight: "600",
    fontSize: 178,
  },
  description: {
    marginTop: -30,
    fontSize: 60,
  },
});

horizontal로 바꾸면, 수평방향으로 바뀐다.
ScrollView를 쓸때 style를 만들고 싶으면 prop를 쓰면 된다.
대신에 사용할 것은 container view이다.
외울 것이 없다. doc에서 배우면 된다.

ScrollView에는 flex를 할 필요가 없고, 스크린을 넘어가야 한다.

실행되고 있는 expo에서 elemet inspect를 누르면 elemet를 보고 얼마나 큰 지 알수있다.
즉, view에 마우스를 가져다 대면 어디있는지 알려준다.
그리고 살짝 클릭하면 이름이 나온다.
이걸 가능하게 하고싶으면 카메라를 흔들면 된다.

day를 스크롤하면 다른 day를 보고싶고, 우리는 하나의 day만 보고싶다.
그래서 핸드폰의 사이즈를 알려주는 api인 dimension을 사용하는 것이다.
그러면 모든 day에게 window를 가질 수 있게 한다.
우리는 dimension으로 우리 스크린의 크기를 알 수 있다.

pagingenable은 우리가 스크롤을 다양하게 못하게 하는 것이다.