스타일링(1)

1. 스타일링

1.1 스타일 직접 입력(인라인 스타일)

• 객체 내에 객체로 입력하여야 한다.
• 속성명은 카멜케이스로 입력하며 속성명은 기존 자바스크립트 언어와 조금 차이가 있다.

<View style={styles.container}>
  <Text style={{ backgroundColor: 'black', color: 'white', fontSize: 20 }}>
    Open up App.js
  </Text>
  <StatusBar style="auto" />
</View>

1.2 class, id 처럼 입력

• StyleSheet 내에 객체 생성

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={{ backgroundColor: 'black', color: 'white', fontSize: 20 }}>
        Open up App.js
      </Text>
      <Text style={styles.error}>Error Text</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  error: {
    backgroundColor: 'pink',
    color: 'red',
    fontSize: 20,
  },
});

1.3 여러가지 스타일 동시 적용

객체 내에 배열로 나열한다.

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={[styles.text, { color: 'orange' }]}>Open up App.js</Text>
      <Text style={[styles.text, styles.error]}>Error Text</Text>
      <StatusBar style="auto" />
    </View>
  );
}

1.4 스타일 시트만 별도의 파일로 분리

• 코드를 분리하여 깔끔하게 보이도록 한다.

// style.js
import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    backgroundColor: 'black',
    color: 'white',
    fontSize: 20,
  },
  error: {
    backgroundColor: 'pink',
    color: 'red',
    fontSize: 20,
  },
});

export const orangeText = {
  color: 'orange',
};

// app.js
import { styles, orangeText } from './style';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={[styles.text, orangeText]}>Open up App.js</Text>
      <Text style={[styles.text, styles.error]}>Error Text</Text>
      <StatusBar style="auto" />
    </View>
  );
}

2. flexbox

• 자바스크립트의 flex 와 유사

• 부모 컴포넌트에서 display : flex 로 지정할 필요 없다.

• red 박스 100px , blue 박스 100px, green 박스 flex : 1 로 남은 공간 전체 차지

// App.js
export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <Box style={{ backgroundColor: 'red', height: 100 }} />
      <Box style={{ backgroundColor: 'green', flex: 1 }} />
      <Box style={{ backgroundColor: 'blue', height: 100 }} />
    </View>
  );
}

// Box.js
import react from 'react';
import { View } from 'react-native';

const Box = ({ style }) => {
  return <View style={[{ borderWidth: 2, width: '100%' }, style]}></View>;
};

export default Box;

3. 정렬(flexDirection)

• flexDirection 의 종류

  • column(default)
  • column-reverse
  • row
  • row-reverse

• justifyContent 는 flexDirection 과 같은 방향
  

• alignItems 는 flexDirection 과 수직 방향
  

4. 그림자

• IOS 의 경우 Shadow Props 속성 사용
  https://reactnative.dev/docs/shadow-props

• ANDROID 의 경우 elevation 속성 사용
  https://reactnative.dev/docs/view-style-props#elevation

// App.js
import react, { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View } from 'react-native';
import Shadow from './Shadow';

export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <Shadow />
    </View>
  );
}

// Shadow.js
import react from 'react';
import { StyleSheet, View } from 'react-native';

const Shadow = () => {
  return <View style={style.shadow}></View>;
};

const style = StyleSheet.create({
  shadow: {
    backgroundColor: '#ffffff',
    width: 200,
    height: 200,
    shadowColor: '#000000',
    shadowOffset: {
      width: 10,
      height: 10,
    },
    shadowOpacity: 0.5,
    shadowRadius: 10,
    elevation: 20, // android 속성
  },
});

export default Shadow;

4.1 Platfrom 사용

os(android, ios) 별로 다르게 속성을 줄때 사용한다.
https://reactnative.dev/docs/platform

const Shadow = () => {
  return (
    <View style={style.shadow}>
      <Text>{Platform.OS === 'ios' ? 'IOS' : 'ANDROID'}</Text>
    </View>
  );
};

const style = StyleSheet.create({
  shadow: {
    backgroundColor: '#ffffff',
    width: 200,
    height: 200,
    ...Platform.select({
      android: {
        elevation: 20, // android 속성
      },
      ios: {
        shadowColor: '#000000',
        shadowOffset: {
          width: 10,
          height: 10,
          shadowOpacity: 0.5,
        shadowRadius: 10,
        },
        
      },
    }),
  },
});