Слайд-изображения из FlatList, как слайд Tiktok — React Native

У меня есть один экран, на котором я перечислил все изображения, когда я нажимаю на одно изображение, он переходит на другой экран, где я хочу реализовать слайдер TikTok и перечислять все изображения с предыдущего экрана.

Код с первого экрана:

      const renderItem = ({ item }: { item: IInspire }) => {
    return (
        <TouchableOpacity
            key={item.id}
            onPress={() => {
                navigation.navigate('DetailIspireScreen', { item });
            }}
            style={[styles.itemsTouchable, { height: item.id % 2 === 0 ? 250 : 140 }]}
            activeOpacity={0.8}
        >
            <ImageBackground style={styles.imageBackgroundContainer} imageStyle={styles.imageBackStyle} source={item.image}>
                <View style={styles.itemsSize} />
                <LinearGradient colors={['transparent', Colors.Black]} style={styles.linearGradientContainer} />
            </ImageBackground>
        </TouchableOpacity>
    );
};

Код с экрана, где я хочу реализовать слайдер TikTok

      type InspiredScreenParam = {
InspiredScreen: {
    item: never;
};

};

      export const DetailIspireScreen = (): JSX.Element => {
const navigation = useNavigation();
const item = useRoute<RouteProp<InspiredScreenParam, 'InspiredScreen'>>()?.params?.item;
const onBackPress = () => navigation.navigate('Inspire' as never);

const renderItem = () => {
    return (
        <View style={styles.list}>
            <ImageBackground style={styles.imageBackgroundContainer} imageStyle={styles.imageBackStyle} source={item.image}>
                <View style={styles.itemsSize} />
                <LinearGradient colors={['transparent', Colors.Black]} style={styles.linearGradientContainer} />
                <View>
                    <TouchableOpacity>
                        <Image style={styles.fireIcon} source={require('@assets/icons/metro-fire.png')} />
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <Image style={styles.shareIcon} source={require('@assets/icons/share.png')} />
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <Image style={styles.blackFireIcon} source={require('@assets/icons/black-fire.png')} />
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <Image style={styles.shopIcon} source={require('@assets/icons/shop.png')} />
                    </TouchableOpacity>
                </View>
            </ImageBackground>
        </View>
    );
};

    return (
    <SafeAreaView style={styles.container}>
        <TouchableOpacity onPress={onBackPress}>
            <Image style={styles.backButton} resizeMode='cover' source={require('@assets/icons/left-arrow.png')} />
        </TouchableOpacity>
        <FlatList renderItem={renderItem} pagingEnabled={true} data={[item]} />
    </SafeAreaView>
);

};

Спасибо :)

0 ответов

Другие вопросы по тегам