React Native - style 속성과 layout

import부분을 살펴보면 react-native에서 가져오는게있고 expo에서 가져오는게 있다.

react-native에서 기존에 지원하던 라이브러리들을 축소해 더 가볍게 개발할 수 있게 바뀌었고,

그밖에 expo사이트에서 에서 필요한 라이브러리를 import해 사용하면 됨.

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}>hello</Text>
      <StatusBar style="auto" />
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text : {
    fontSize: 28
  }
});

• div 대신 View 태그, 모든 text는 Text 태그안에 넣어 작성
• style주는 방법은 2가지가 있는데 위처럼 StyleSheet.create({ style obj 작성 }) 혹은 태그에 style={{ css 작성 }}으로 사용

 

 

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

export default function App() {
  return (
    <View style={{flex:1}}>
      <View style={{flex:1, backgroundColor: "tomato"}}></View>
      <View style={{flex:3, backgroundColor: "teal"}}></View>
      <View style={{flex:1, backgroundColor: "orange"}}></View>
    </View>
  );
}

• 모든 View태그는 flex container이며 모바일 기반이기때문에 default direction이 웹과 다른 column이다.
• 디바이스별 반응형 작업을 해야하기때문에 width, height 대신 flex 비율로 조정한다.

 

 

스크롤페이지를 만들고 싶다면 ScrollView 태그를 사용하자. 

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, ScrollView, Dimensions } from 'react-native';

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

export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <View style={styles.city}>
        <Text style={styles.cityName}>Seoul</Text>
      </View>
      <ScrollView 
        horizontal 
        pagingEnabled 
        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>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1, 
    backgroundColor: "tomato",
  },
  city : {
    flex:1,
    justifyContent:"center",
    alignItems: "center"
  },
  cityName:{
    fontSize: 58,
    fontWeight: "500",
  },
  day : {
    width: SCREEN_WIDTH ,
    alignItems:"center",
  },
  temp : {
    marginTop: 50,
    fontSize: 168,
    fontWeight: "700"
  },
  description: {
    marginTop:-10,
    fontSize: 48,
  }
});

• scrollView에는 flex사이즈를 줄 필요가 없다. 대신 device의 width와 height 값을 알아내려면 react-native의 Dimensions API를 import해 사용!
  • const { width : SCREEN_WIDTH } =  Demensions.get('window');
• ScrollView의 props(그 밖엔 공식문서 참고)
  • horizontal : 가로로 방향 전환
  • pagingEnabled : 페이징 스크롤 처리
  • showHorizontalScrollIndicatior : false시 가로 스크롤바 삭제
  • style속성은 contentContainerStyle로 변경

 

아. 스타일을 재사용하고 싶으면 style={{...styles.어쩌구, alignItems:"center"}} 이렇게 ES6 Spread Operator문법 + 원하는 스타일속성을 추가해주면 댐.

 

 

 

 

https://docs.expo.dev/versions/latest/

Reference

• 여러가지 반응형 작업은 부트스트랩처럼  expo SDK 에서 지원해준다.
• 문서가이드에 따라 terminal에 설치 후 import해와서 사용하면 됨.(진동, dateTimePicker, FileSystem 등)