React Native Layout & Style

# 레이아웃 기본 룰

RN에서의 플렉스 박스는 웹에서와 유사하게 작동합니다. 웹과 달리 앱에서는 모든 View가 플렉스 컨테이너입니다. 2. (display:block, display:inline-block과 같은 것들이 존재하지 않습니다.)
flexDirection은 기본적으로 column입니다.
대부분 스크린 작성 단위에 width나 height값을 사용하지 않습니다. 최대한 반응형으로 레이아웃을 구현해야 합니다. 이는 flex:사이즈 비율로 설정합니다.

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

위의 코드로 자식 View들이 비율적으로 화면을 구성하도록 하려면 반드시 부모 View에 flex속성을 부여해야 합니다.

# 스타일

StyleSheet을 임포트합니다.
스타일 객체를 작성합니다.
View 컴포넌트의 style 프로퍼티에 객체를 전달합니다.
styles 객체는 너무 커지는 것만 아니라면 원하는 대로 프로퍼티를 작성하여 View의 프로퍼티로 호출하면 됩니다.

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

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'black',
    },
});

스타일 바인딩

스타일 프로퍼티 바인딩을 위해서 구조분해 문법을 적용할 수 있습니다. 위의 코드에서 사용된 스타일의 container객체를 그대로 사용하고 싶다면 다음 코드처럼 작성하면 됩니다.

export default function App(){
    // 구조분해!
    return <View style={...styles.container, fontSize:100}/>
}

# ScrollView

화면 내에 여러가지 View들을 나열하다보면 레이아웃이 찌그러지게 됩니다. 웹과 달리 앱에서는 View가 화면을 overflow한다고 해서 자동으로 스크롤 효과를 부여하지 않기 때문입니다.

이럴때 ScrollView 컴포넌트를 사용하면 ScrollView 컴포넌트 내에서 오버플로우 되는 컴포넌트가 있을때 자동으로 스크롤 효과를 부여해줍니다.

import { ScrollView } from 'react-native';

export default function App() {
    // ..
    return (
        <View>
            <ScrollView>
                <View></View>
                <View></View>
                <View></View>
            </ScrollView>
        </View>
    );
}

ScrollView 컴포넌트에는 다양한 프로퍼티가 존재합니다.

pagingEnabled - (boolean) 스크롤에 페이지 효과를 두어 View별로 구분된 스크롤링을 할 수 있게 해줍니다.
horizontal - (boolean) 기본 수직 스크롤에서 수평 스크롤 효과를 부여합니다.
showsHorizontalScrollIndicator - (boolean) pagingEnabled 프로퍼티를 사용하면 하단에 현재 스크롤 페이지를 표시해주는데, 기본은 true이고 false로 설정하면 해당 효과가 사라집니다.
contentContainerStyle - (Object) 스크롤뷰는 일반 뷰처럼 style프로퍼티를 사용하지 않습니다. 프로퍼티 명만 다르고 스타일 객체를 전달하는 것은 동일합니다.

ScrollView 레이아웃

스크롤뷰 컴포넌트는 기본적으로 화면을 오버플로우하는 크기를 전제로 합니다. 따라서 flex를 통한 크기조절이 의미가 없으며 아래에서 언급할 Dimensions 객체를 활용해야합니다.

모바일 화면 너비

스크롤뷰 하위 컴포넌트에 대해 각각 화면 너비에 꽉 차는 레이아웃 구성을 할 때에 width:100%와 같은 일반적인 웹 레이아웃 비율 단위를 사용하지 못합니다.

다양한 모바일 기기마다 너비가 천차만별이기 때문에 각 기기에 맞는 사이즈를 얻어오는 객체를 리액트 네이티브에서는 제공해줍니다.

Dimensions.get('window').width - 모바일 기기의 너비를 얻습니다.
Dimensions.get('window').height - 모바일 기기의 높이를 얻습니다.

import { Dimensions } from 'react-native';

const style = StyleSheet.create({
    box: {
        width: Dimensions.get('window').width,
    },
});

ActivateIndicator

리액트 웹 앱 제작시 데이터 fetch가 끝나지 않았을 때 로딩 애니메이션을 보여주는게 일반적입니다.

리액트 네이티브 앱에서는 이를 위한 로딩 애니메이션 컴포넌트를 제공합니다.

import { ActivityIndicator } from 'react-native';

function App() {
    return (
        // ...
        <View style={styles.day}>
            <ActivityIndicator color='white' size='large' />
        </View>
    );
}

# Expo icon

다음의 링크 (opens new window)를 접속하면 expo에서 제공하는 아이콘 종류들을 볼 수 있습니다.

네이티브하게 생성한 앱이 아닌 expo-init으로 설치한 앱의 경우 expo 하위 패키지에 아이콘들을 모아둔 곳이 있습니다. 아이콘 이름과 함께 렌더링을 위한 Ionicons 컴포넌트를 함수 내에 작성하면 됩니다.

import { Ionicons } from '@expo/vector-icons';

function App() {
    return (
        <Ionicons name={아이콘 이름} size={24} color='white' />
    );
}

← React Native 개념 React Native Touchables →