Reactnative 스터디 2주차
스타일
- style : 리액트네이티브의 컴포넌트는 style 프롭을 갖습니다.
style 객체의 속성들을 수정하여 컴포넌트를 스타일링 할 수 있습니다.
<Text style={{ color: "red", backgroundColor: "blue" }}>인라인</Text>
- StyleSheet : StyleSheet.create로 보다 깔끔하게 정리하여 담아쓸 수 있습니다.
export const styles = StyleSheet.create({ errorText: { backgroundColor: "black", color: "red", fontSize: 20, }, text: { color: "orange", },});
- style에 배열객체를 : style 프롭으로 배열객체를 넣을 수 있습니다.
이 때, 배열의 index가 높을수록 더 높은 우선 순위를 갖습니다.
<Text style={[styles.errorText, styles.text]}>배열 객체</Text>
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026aa827-67bf-4a64-ae2a-7f7a700a3acb%2Fb466dc18-a45c-477a-8ff6-61539871b6c4%2FUntitled.png?table=block&id=f6474e39-f58e-460a-8db5-ef3bfca25cbe&cache=v2)
style 이미지
StyleSheet로 styles에 담은 errorText와 text를 배열을 통해 Text에 적용시켰습니다.
이때 styles.text의 우선순위가 더 높기 때문에 color: “orange”가 적용되었습니다.
- styled-component : 더 직관성있는 코드 작성을 도와주는 라이브러리입니다.
camel casing이 아닌 Tagged Template Literals 문법을 사용하여 웹표기 방식과 동일합니다.
const StyledText = styled.Text` color: palevioletred; `
- shadow : shadow 속성을 통해 컴포넌트에 그림자 효과를 부여할 수 있습니다.
shadow:{ backgroundColor:"white", height: 200, width: 200, shadowColor: "black", shadowOffset:{ width: 10, height: 10, }, shadowOpacity: 0.5, shadowRadius:10, elevation: 20, },
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026aa827-67bf-4a64-ae2a-7f7a700a3acb%2F26f85c63-49ce-494a-a5e6-f6a9d1a3eace%2FUntitled.png?table=block&id=e993e3fe-7fc6-47fa-8767-5cc282c611fc&cache=v2)
shadow 이미지
shadow 설정 방식은 아이폰과 안드로이드 두 플랫폼에서 차이가 있습니다.
안드로이드의 경우, elevation 속성을 통해 shadow 효과를 지정합니다.
이때 Platform.select 기능을 사용하면 두 플랫폼에서 각각 실행될 코드를 지정할 수 있습니다.
Flexbox
- flex : 컴포넌트의 컨테이너 안에서의 크기를 비율로 설정할 수 있습니다.
<Box style={{backgroundColor:'red', flex: 1}}/><Box style={{backgroundColor:'green', flex: 1}}/><Box style={{backgroundColor:'blue', flex: 1}}/>
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026aa827-67bf-4a64-ae2a-7f7a700a3acb%2Fce306e21-ec54-4ab9-bf31-3ffa637d9c5c%2FUntitled.png?table=block&id=409f8d6e-f9e2-4ff3-b305-a852ecbe1845&cache=v2)
flex 이미지
빨강, 초록, 파랑 박스를 flex를 통해 1:1:1의 비율로 지정하였습니다.
flexbox 아이템 정렬방식설정
container: { flex: 1, flexDirection: "column", backgroundColor: '#fff', alignItems: 'center', //flexDirection 수직방향 justifyContent: 'center', //flexDirection 방향 },
- flexDirection : 아이템이 쌓이는 방향을 지정합니다. 일반적으로 column이 세로, row가 가로배치입니다.
- alignItems : flexDirection의 수직방향 정렬 방식을 지정합니다.
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026aa827-67bf-4a64-ae2a-7f7a700a3acb%2F7a93e85a-69ec-497a-8739-01f962ea01d1%2FUntitled.png?table=block&id=db102cb2-08e6-4f43-b716-2f807f180ba9&cache=v2)
- justify-content : flexDirection 방향 정렬 방식을 지정합니다
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F026aa827-67bf-4a64-ae2a-7f7a700a3acb%2Fdbd49153-a3bc-4697-9cba-805ab56627b4%2FUntitled.png?table=block&id=fc1300f1-a466-4af7-8cf1-c1cae2f707ad&cache=v2)