85 lines
2.4 KiB
React
85 lines
2.4 KiB
React
|
import { View, Text } from "react-native";
|
||
|
|
import React from "react";
|
||
|
|
import { Image } from "expo-image";
|
||
|
|
import { useTailwind } from "tailwind-rn";
|
||
|
|
import { Badge, ListItem, Button } from "@rneui/themed";
|
||
|
|
import { useNavigation } from "@react-navigation/native";
|
||
|
|
|
||
|
|
const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
|
||
|
|
|
||
|
|
export default function MessageCard({ data, listRef }) {
|
||
|
|
const navigation = useNavigation();
|
||
|
|
const tailwind = useTailwind();
|
||
|
|
return (
|
||
|
|
<ListItem.Swipeable
|
||
|
|
onPress={() =>
|
||
|
|
navigation.navigate("MessageDetail", {
|
||
|
|
mid: data.mid,
|
||
|
|
name: data.name,
|
||
|
|
price: data.price,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
bottomDivider
|
||
|
|
onSwipeBegin={() => {
|
||
|
|
listRef.current.setNativeProps({
|
||
|
|
scrollEnabled: false,
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
onSwipeEnd={() => {
|
||
|
|
listRef.current.setNativeProps({
|
||
|
|
scrollEnabled: true,
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
containerStyle={tailwind("p-0")}
|
||
|
|
rightContent={(reset) => (
|
||
|
|
<Button
|
||
|
|
title="删除"
|
||
|
|
onPress={() => {
|
||
|
|
console.log("删除");
|
||
|
|
reset();
|
||
|
|
}}
|
||
|
|
icon={{ name: "delete", color: "white" }}
|
||
|
|
buttonStyle={{ minHeight: "100%", backgroundColor: "red" }}
|
||
|
|
titleStyle={tailwind("text-base")}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<View style={tailwind("flex-1")}>
|
||
|
|
<View style={tailwind("flex-row py-3")}>
|
||
|
|
<Image
|
||
|
|
style={tailwind("w-12 h-12 rounded-full")}
|
||
|
|
source={data.head}
|
||
|
|
placeholder={blurhash}
|
||
|
|
contentFit="cover"
|
||
|
|
transition={1000}
|
||
|
|
cachePolicy="disk"
|
||
|
|
/>
|
||
|
|
<View style={tailwind("ml-2 justify-around flex-1")}>
|
||
|
|
<Text
|
||
|
|
style={tailwind("text-base")}
|
||
|
|
numberOfLines={1}
|
||
|
|
ellipsizeMode="tail"
|
||
|
|
>
|
||
|
|
{data.name}
|
||
|
|
</Text>
|
||
|
|
<Text
|
||
|
|
style={tailwind("text-sm text-gray-400")}
|
||
|
|
numberOfLines={1}
|
||
|
|
ellipsizeMode="tail"
|
||
|
|
>
|
||
|
|
{data.latestContent}
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
<View style={tailwind("ml-2 justify-around items-center")}>
|
||
|
|
<Text style={tailwind("text-sm text-gray-400")}>{data.time}</Text>
|
||
|
|
<Badge
|
||
|
|
value={data.newMessagesNum < 99 ? data.newMessagesNum : "99+"}
|
||
|
|
status="error"
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</ListItem.Swipeable>
|
||
|
|
);
|
||
|
|
}
|