[RN] Style

weather App을 만들기 위한 Style과 container들을 구현하려고 한다. 

 

1.Style Sheet 사용하기

 

이걸 StyleSheet을 이용하면

 

 

++) expo 새로고침 안될때

콘솔창에 r을 누르면 된다!

콘솔창에 m을 누르면 메뉴가 뜨는데 많은 옵션을 보여준다.

핸드폰을 흔들어도 메뉴가 뜬다!

2.Container 구현하기

 

이제 View에 배경색을 줘볼 것이다.

서울 text를 갖는 View 하나랑, 서울의 날씨를 알려주는 weather View 하나를 만들것이고, 전자와 후자의 비율은 1:3으로 줄 것이다. 

import { StyleSheet, Text, View } from 'react-native';
 
export default function App() {
  return (
    <View style={styles.container} > 
    <View style={styles.city}>
      <Text>Seoul</Text>
    </View>
    <View style={styles.weather}>
      
    </View>
      
      
    </View>
  );
  }
  const styles=StyleSheet.create({
    container:{
      flex:1,
      backgroundColor:"tomato"
    },
    city:{
      flex:3,
      backgroundColor:"blue"
    },
    weather:{
      flex:1,
      backgroundColor:"teal"
    }
  });
 

이미 container는 flex Container이기 때문에 justifyContent:"center"를 해줄 수 있다.

 

++) justifyContent : 가로축 - 중심축

가로축을 기준으로 좌우에 대한 정렬 

alignItems:세로축-교차축

세로축을 기준으로 정렬 

 

 

최종코드

 

import { StatusBar } from 'expo-status-bar';
import reactDom from 'react-dom';
import { StyleSheet, Text, View } 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>
      
    </View>
      
      
    </View>
  );
  }
  const styles=StyleSheet.create({
    container:{
      flex:1,
      backgroundColor:"tomato"
    },
    city:{
      flex:1.2,
      backgroundColor:"tomato",
      justifyContent:"center",
      alignItems:"center"
    },
    cityName:{
      fontSize:68,
      fontWeight:"500",
 
    },
    weather:{
      flex:3,
      //backgroundColor:"teal"
    },
    day:{
      flex:1,
      
      alignItems:"center",
      //backgroundColor:"teal"
    },
    temp:{
      marginTop:50,
      fontSize:178,
      
 
    },
    description:{
      fontSize:60,
      marginTop:-30
    }
  });
 
 
 
 
 

 

 

정리하자면..!

 

<View>는 HTML에서 <div> 같은 존재이다.

 

크게 city View와 weather View로 나뉘는데 가장 겉에 있는 두 container에 

style로 backgroundColor, 가로/세로 정렬과 flex를 준다. 

 

city View안에는 <Text>를 쓸 수 있고 , style로는 fontSize와 fontWeight를 준다.

 

weather View도 flex를 주고

weatehr View안에는 day 컨테이너가 있는데 이 day컨테이너에 backgroundColor,

세로 정렬을 준다.

day 컨테이너 안에는 temp와 descripton 컨테이너가 있는데 이 두 container에 style로

fontSize와 marginTop같은 세세한 style을 준다. 

 

3.Scroll View

RN에서는 스크롤이 없다! 왜냐면 View일뿐 브라우저가 아니기 때문이다.

RN은 모든게 Component이기에 스크롤을 하려면 ScrollView를 사용해야한다.

ScrollView는 "react-native"에서 import하면 된다.

겉에 ScrollView로 감싸주고 그 안에 View들을 넣어주면 스크롤이 정상적으로 먹힌다!

 

horizontal이라는 prop을 ScrollView에 넣으면 어떻게 될까?

 

가로로 넘겨서 볼 수 있다.

근데 문제가 있는데 ScrollView가 이전에 지정해줬던 size를 반영하지 않고 있다!!

 

Scroll View를 쓸 때  Style를 만들고 싶다면  style prop을 쓰면 안되고 container Style을 써야한다.

 

여기에 그냥 style을 contentContainerStyle로 바꿔주면 된다. 

https://reactnative.dev/docs/scrollview#contentcontainerstyle

ScrollView · React Native

 

문제점이 있는데 스크롤이 멈춘다는 것이다. 왜냐면 ScrollView에는 flex 사이즈를 줄 필요가 없는데 ScrollView는 스크린보다 커야하기 때문이다. 

Scroll View에 연결된 애가 weather인데 

weather의  

flex 를 지워줄 것이다! 

 

또한 day에 해당하는 것도 작동이 잘 안된다. 

day에 설정해놓은 flex도 지워준다. 

 

 

지금까지 화면에는 두개의 day에 대한 온도와 날씨가 주어졌는데 이번에는 하나의 day에 대한 온도와 날씨를 UI에 띄워보도록 하겠다. 

 

우선 전체 스크린 사이즈를 가져와야 한다. 하나의 day가 전체 화면의 크기가 될 것이다.

 

4.Dimensions

 

 

근데 여기서 width:300이라 하기엔 핸드폰 마다 사이즈가 다 다르기 때문에 절대적인 숫자로 나타내기가 좀 그렇다. 그래서 핸드폰 사이즈를 알려주는 API를 활용한다.

React Native API인 Dimensions를 사용하여 화면의 크기를 얻는다. 

 

화면의 크기가 375인 것을 알 수 있다.

 

객체형태로 width를 저장한다음 (오브젝트 안에 width를 가져오고 그 이름을 SCREEN_WIDTH로 바꿔준다는 것이다)

 

 

width는 상수인 SCREEN_WIDTH로 설정해주면 된다. 

 

이렇게 하면 스크린에 하나의 day만 뜨게 된다. 

 

SCREEN_WIDTH는 이런식으로 변수 선언도 가능하다. 

 

5. pagingEnabled

이렇게 하면 문제점이 스크롤이 양쪽 끝에서 이상하게 되고 있다. 일정 경계 이상 스크롤이 되면

스크롤을 못하게 막으려고 하는데 이때는 pagingEnabled를 사용하면 된다.

이 친구는 우리가 스크롤을 자유롭게 하지 못하게 막는다. 대신 페이지가 생기도록 해준다.

 

 ScrollView의 props에 pagingEnabled를 넣어준다. 

이렇게 하면 양쪽 끝을 스크롤 하려고 했을 때 뒤로 간다. 

 

6. indicatorStyle

 

UI의 밑부분에 pageIndicator라고 스크롤 되는게 보이는데 이걸 숨기려고 한다.

이걸 숨길 수 있는 props도 있는데 showsHorizontalScrollIndicator을 사용해주면 된다.

 

이걸 false로 설정해주면 스크롤바가 보이지 않는다.

만약에 indicator Style을 주고 싶으면 indicatorStyle="white"이런식으로 사용하면 되는데 이건 ios에서만 작동한다.

 

결론적으로 어떤 props는 ios만 작동하기도 하고, 어떤 props는 안드로이드에서만 작동하기도 한다.