[React-Native] FlatList style적용 / View 내부 가로 배치/이미지 테두리 둥글게

FlatList안에는 contentContainerStyle과 style을 둘 다 사용할 수 있다.

 

---

View에서 자식 요소들을 가로, 세로로 쌓기 위해서 Flex Direction 스타일을 사용합니다.

Flex Direction은 row(행), column(열) 속성을 사용할 수 있으며 row가 가로배치, column이 세로배치라고 생각하시면 됩니다.

 

자식 요소 라는 말에 유의하셔야 합니다. 현재 View에 Flex Direction을 'row'라고 한다면 자식 View들이 가로배치 됩니다.

 

또한 Flex Direction의 기본속성은 column으로, 여지껏 별도로 명시하지 않았기 때문에 View들이 세로로 쌓이는 모습을 봐왔습니다.

아래의 예를 통해 직접 보겠습니다.

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.item1} />
        <View style={styles.item2} />
        <View style={styles.item3} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row', // 혹은 'column'
  },
  item1: {
    flex: 1,
    backgroundColor: 'red',
  },
  item2: {
    flex: 1,
    backgroundColor: 'yellow',
  },
  item3: {
    flex: 1,
    backgroundColor: 'green',
  },
});

 

3개의 자식 View를 flex:1 속성으로 하여 1:1:1 공간을 차지하도록 했습니다.

Flex Direction 설정을 row로 바꾸니 볼리비아 국기가 기니아 국기로 뙇! 바뀌는 모습을 볼 수 있습니다.

---

react native 이미지 테두리 둥글게 하기

borderRadius:숫자

borderRadius:50 부터는 원으로 나타남

---

src 는 source 로 어디에 위치하고 있는 이미지를 불러올 것인지를 정해주는 것이다.

리액트 네이티브에서 이미지 컴포넌트의 주소를 정해주는 방법은 다음과 같이 source 뒤에 속성 값으로 적어주는 방법이다.

<Image source={URL} />

이때 URL에 들어갈 수 있는 값은 2가지로 다음과 같다.

1. {uri : '이미지 주소'} 로 외부 주소를 통해 가져오기.
2. require('로컬경로') 를 통해 로컬에 저장되어 있는 이미지를 불러오기.