스타일링(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. 정렬
- 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 사용
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,
},
}),
},
});
Author And Source
이 문제에 관하여(스타일링(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bleach7/스타일링저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)