1

我在一个屏幕上列出了所有图像，当我单击一个图像时，它导航到另一个屏幕，我想在其中实现 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>
);

};

谢谢 ：）

4

0 回答 0