[react-native] 가로 스크롤뷰 만들기

기존의 스크롤 뷰를 만들면 default 로  세로로 되어있다. 

변경하는 방법은 간단하다.  다음 명령어만 추가해주면 된다.

horizontal = {true}

또한 

 ScrollView의 끝의 이벤트를 onMomentumScrollEnd를 통해 감지할 수 있다.

다음 소스는 스크린 3개를 만들고 마지막 스크린에 닿으면 Scrolling is End 로그가 찍히는 소스이다.

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

class HorizonalScrollView extends Component {
    render() {
        return (
            <ScrollView
                horizontal={true}
                showsHorizontalScrollIndicator = {true}
                onMomentumScrollEnd ={
                    () => {console.log('Scrolling is End')}
                }
            >
                <View style={styles.viewStyle1}>
                    <Text style = {styles.textStyle}>
                        Screen 1
                    </Text>
                </View>
                <View style={styles.viewStyle2}>
                    <Text style = {styles.textStyle}>
                        Screen 2
                    </Text>
                </View>
                <View style={styles.viewStyle3}>
                    <Text style = {styles.textStyle}>
                        Screen 3
                    </Text>
                </View>
            </ScrollView>

        );
    }
}
let screenWidth = Dimensions.get('window').width;
let screenHeight = Dimensions.get('window').height;
const styles = StyleSheet.create({
    viewStyle1: {
        backgroundColor : "#5f9ea0",
        flex: 1,
        width : screenWidth,
        height : screenHeight,
        justifyContent: 'center',
        alignItems: 'center'
    },
    viewStyle2: {
        backgroundColor : "#08f000",
        flex: 1,
        width : screenWidth,
        height : screenHeight,
        justifyContent: 'center',
        alignItems: 'center'
    },
    viewStyle3: {
        backgroundColor : "#ff0043",
        flex: 1,
        width : screenWidth,
        height : screenHeight,
        justifyContent: 'center',
        alignItems: 'center'
    },
    textStyle: {
        fontSize : 20,
        padding : 15,
        color : 'white',
        textAlign: 'center'
    }
});
export default HorizonalScrollView;