[날씨앱] ReactNative 규칙 및 가로 스크롤 뷰 사용

 

이전에 만들어 놓은 my-app으로 날씨앱을 만들거임 

 

https://blog.naver.com/drv983/223292498860

React Native의 규칙 (View, Text, StatusBar, StyleSheet)

 

 

React Native에는 규칙이 있다. 

 

native의 기본 코드 구성. 처음 보는 View, Text, StatusBar, StyleSheet

 

View:

react native는 웹사이트가 아니기 때문에 div 대신 View를 사용해야 한다. (div 쓰면 에러)

View는 container라고 생각하면 된다. 앞으로 만들 것들은 대부분 View로 만들게 될 것이라는 점! div 대신 사용하는 것이라 항상 import를 해야한다.

• UI의 기본 구성 요소 중 하나로, 다른 컴포넌트를 포함할 수 있는 컨테이너입니다.
• View는 UI의 레이아웃을 구성하는 데 사용됩니다.

​

Text:

react native에 있는 모든 text는 text component에 들어가야 한다. 브라우저가 아니므로 span, p 같은 태그들은 사용 못함. 모든 텍스트는 text component 안에 들어가야 한다. 만약 View 안에 글자를 바로 넣는다면 에러가 뜨니 주의

• 텍스트를 표시하는 데 사용되는 컴포넌트입니다.
• Text 컴포넌트를 사용하여 화면에 글자를 나타낼 수 있습니다.

​

StatusBar:

• 상태 표시줄을 컨트롤하는 데 사용되는 컴포넌트입니다.
• 배경색, 글자색 등을 조절하여 상태 표시줄의 모양을 변경할 수 있습니다.

​

StyleSheet:

• 스타일을 정의하는 데 사용되는 객체입니다.
• JavaScript에서 CSS 스타일과 유사한 구문을 사용하여 컴포넌트에 스타일을 적용할 수 있습니다.

 

view는 항상 display flex가 적용됐다고 생각하면됨. 

 

import { StatusBar } from "expo-status-bar";

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

export default function App() {

  return (

    <View style={styles.container}>

      <Text style={styles.text}>날씨앱!</Text>

      <Text>여보세요!</Text>

      <StatusBar style="auto" />

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: "#fff",

    alignItems: "center",

    justifyContent: "center",

  },

  text: {

    fontSize: 20,

  },

});

 

이런식으로 다른 style을 추가하여 사용가능함

---

https://reactnative.dev/docs/activityindicator

ActivityIndicator · React Native

 

 

 

 

 

https://blog.naver.com/drv983/223292569902

View 는 항상 Flex가 적용됨 방향은 위아래(column)임.

 

 

 

 

---

스크롤뷰를 만든다. 

https://reactnative.dev/docs/scrollview

ScrollView · React Native

 

 

 

 

 

1.  스크롤 뷰 방향 가로로 변경 

 

 

2.  스크롤 바 삭제

showsHorizontalScrollIndicator={false}

 

 

각 스마트폰 화면의 가로 사이즈

day에 적용한다. 

 

 

import { StatusBar } from "expo-status-bar";

import { Dimensions, ScrollView, StyleSheet, Text, View } 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

        horizontal

        showsHorizontalScrollIndicator={false}

        style={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}>28°</Text>

          <Text style={styles.description}>Sunny</Text>

        </View>

        <View style={styles.day}>

          <Text style={styles.temp}>29°</Text>

          <Text style={styles.description}>Sunny</Text>

        </View>

        <View style={styles.day}>

          <Text style={styles.temp}>30°</Text>

          <Text style={styles.description}>Sunny</Text>

        </View>

        <View style={styles.day}>

          <Text style={styles.temp}>31°</Text>

          <Text style={styles.description}>Sunny</Text>

        </View>

      </ScrollView>

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: "#FFF3CF",

  },

  city: {

    flex: 1.2,

    justifyContent: "center",

    alignItems: "center",

  },

  cityName: {

    fontSize: 68,

    fontWeight: "500",

  },

  weather: {},

  day: {

    flex: 1,

    width: SCREEN_WIDTH,

    alignItems: "center",

  },

  temp: {

    marginTop: 50,

    fontWeight: "600",

    fontSize: 170,

  },

  description: {

    marginTop: -30,

    fontSize: 60,

  },

});

 

 

 

 

아래와 같은 구조가 나와야함 

나는 backgroundColor를 다르게해서 나랑 살짝 다름