React Native Animated Flatlist 구성 요소

여러분, 안녕하세요,

Disney+ 및 Netflix 앱에서 영감을 받아 스크롤 위치에 따라 배경을 움직이는 작은 플랫리스트 구성 요소를 작성했습니다.

콘텐츠와 썸네일은 데이터베이스에서 동적으로 쿼리할 수 있습니다. 예를 들어 영화, 책 또는 사진 컬렉션을 빠르고 쉽게 표시할 수 있습니다.

(미리보기 gif가 조금 느려요)


저는 아직 프로그래머로서 상대적으로 신입이기 때문에 귀하의 의견에 매우 만족하고 귀하의 아이디어에서 배우려고 노력할 것입니다. 제 코드 품질도 평가해 주세요.

컴포넌트를 사용하려면 react-native의 Animated 및 ImageBackground가 필요합니다. 저장소는 EXPO 패키지로 업로드되며 readme에 따라 시작할 수 있습니다.

여기에서 MIT 라이선스에 따라 리포지토리를 찾을 수 있습니다: https://github.com/Gismo1337/expo-react-native-swipeup-flatlist-component

제 영어가 완벽하지 않더라도 용서해 주세요. 나는 독일에서 왔고 그것을 배운 적이 없습니다.

import React from 'react';
import { FlatList, Image, Text, View, StyleSheet, TouchableOpacity, } from 'react-native';

const Item = ({ item, onPress }) => (
    <TouchableOpacity onPress={onPress}>
        <Image
            style={styles.item}
            source={item.imgPath}
        />
        <View style={styles.titleTextView}>
            <Text style={styles.titleText}>{item.name}</Text>
        </View>
    </TouchableOpacity>
);

export default function FlatListHorizontal(props) {

    const renderItem = ({ item }) => {
        return (
            <Item
                item={item}
                onPress={() => {
                    props.onPressFn(item)
                }}
            />
        );
    };

    return (

        <View>
            <Text style={styles.headline}>{props.headline}</Text>
            <FlatList
                style={styles.list}
                showsHorizontalScrollIndicator={false}
                horizontal
                data={props.listData}
                renderItem={renderItem}
                keyExtractor={item => item.id}
            />
        </View>

    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    headline: {
        color: 'lightgrey',
        fontSize: 16,
        paddingLeft: 5,
    },
    item: {
        height: 150,
        width: 100,
        maxHeight: 150,
        maxWidth: 100,
        padding: 20,
        marginVertical: 5,
        marginHorizontal: 5,
        borderRadius: 5,
    },
    titleTextView: {
        position: 'absolute',
        bottom: 10,
        left: 10,
        backgroundColor: 'rgba(0,0,0,0.5)',
        alignItems: 'center',
        borderRadius: 5,
        paddingHorizontal: 5,
        width: 90,
        maxWidth: 90,
    },
    titleText: {
        fontSize: 12,
        color: 'white',
    }
});