nft group detail

App.tsx

@@ -7,6 +7,7 @@ import Redpack from '@/pages/screens/redpack';
 import Login from '@/pages/screens/login';
 import WebView from '@/pages/screens/webview';
 import Comment from '@/pages/screens/twitterComment';
+import NftGroupDetail from '@/components/nftGroupDetail';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { ModalPortal } from 'react-native-modals';
 
@@ -44,6 +45,7 @@ class App extends Component {
 								title: 'Tag 3 friends to complete the task',
 							}}
 						/>
+						<stackNavigator.Screen name="NftGroupDetail" component={NftGroupDetail} />
 						<stackNavigator.Screen name="Login" component={Login} />
 					</stackNavigator.Navigator>
 				</NavigationContainer>

src/components/nftGroupCard.tsx

@@ -4,9 +4,15 @@
 import React, { useState, useEffect } from 'react';
 import { postRequest } from '@/netWork/index';
 import { getStorageData, setStorageData } from '@/storage/index';
-import { Alert, Image, StyleSheet, Text, View } from 'react-native';
+import { Alert, Image, StyleSheet, Text, View, Pressable } from 'react-native';
 
 export const NftGroupCard = (props: any) => {
+	const jumpDetail = (groupId: any) => {
+		props.navigation.navigate('NftGroupDetail', {
+			groupId,
+			navigation: props.navigation,
+		});
+	};
 	return (
 		<View style={styles.groupCard}>
 			{props.nftData.length > 0 && (
@@ -19,7 +25,12 @@ export const NftGroupCard = (props: any) => {
 						nftGroupIcon: any;
 						nftGroupName: String;
 					}) => (
-						<View style={styles.groupItem} key={item.nftGroupId}>
+						<Pressable
+							style={styles.groupItem}
+							onPress={() => {
+								jumpDetail(item.nftGroupId)
+							}}
+							key={item.nftGroupId}>
 							<Image
 								style={styles.groupIcon}
 								source={{ uri: item.nftGroupIcon }}
@@ -27,13 +38,14 @@ export const NftGroupCard = (props: any) => {
 							<Text style={styles.groupName}>
 								{item.nftGroupName}
 							</Text>
-						</View>
+						</Pressable>
 					),
 				)}
 			</View>
 		</View>
 	);
 };
+
 const styles = StyleSheet.create({
 	groupCard: {
 		flex: 1,

src/components/nftGroupDetail.tsx

@@ -0,0 +1,133 @@
+/**
+ * 首页 NFT Group 卡片
+ */
+import React, { useState, useEffect } from 'react';
+import { postRequest } from '@/netWork/index';
+import { Image, StyleSheet, Text, View, FlatList, Pressable } from 'react-native';
+
+const NftGroupDetail = (props: any) => {
+	const { navigation, route } = props;
+	const { groupId } = route.params;
+	const [ nftList, setNftList ] = useState([]);
+
+	const goDetail = (item: any) => {
+		if (item.postId) {
+			let url = `https://twitter.com/${item.screenName}/status/${item.postId}`;
+			navigation.navigate('Twitter', {
+				webUrl: url,
+			})
+		}
+		
+	}
+
+	const renderItem = ({ item }: any) => {
+		return (
+			<View style={styles.listRow}>
+				<Image
+					style={styles.listImage}
+					source={{ uri: item.avatarUrl }}
+				/>
+				<View style={styles.listContent}>
+					<View style={styles.listTitle}>
+						<Text style={styles.listName}>{ item.nickName }</Text>
+						<Text style={styles.screenName}> @{ item.screenName }</Text>
+					</View>
+					<Text style={styles.textContent}>{ item.textContent }</Text>
+					<Pressable
+						style={styles.detailView}
+						onPress={() => {
+							goDetail(item)
+						}}>
+						<Text style={styles.text}>Details</Text>
+						<Image style={styles.arrow} source={ require('../static/img/icon/icon-arrow-right.png') } />
+					</Pressable>
+				</View>
+			</View>
+		)
+	}
+
+	useEffect(() => {
+		postRequest('/denet/nft/group/post/list', {
+			groupId: groupId,
+			pageSize: 100,
+			preTimestamp: '',
+		}).then(res => {
+			let { code, data } = res;
+			if (code === 0) {
+				data = data.filter((item: any) => {
+					return item.textContent !== ''
+				})
+				setNftList(data);
+			}
+		})
+	}, [groupId]);
+
+	return (
+		<View style={styles.listView}>
+			<FlatList
+				data={nftList}
+				renderItem={renderItem}>
+			</FlatList>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	listView: {
+		flex: 1,
+		backgroundColor: '#fff',
+	},
+	listRow: {
+		padding: 15,
+		flexDirection: 'row',
+		justifyContent: 'space-around',
+		borderBottomWidth: 1,
+		borderBottomColor: '#F0F3F4',
+	},
+	listImage: {
+		width: 47,
+		height: 47,
+		marginRight: 11,
+		borderRadius: 47,
+	},
+	listContent: {
+		flex: 1,
+		fontSize: 15,
+		color: '#101318',
+	},
+	listTitle: {
+		flexDirection: 'row',
+		marginBottom: 4,
+	},
+	listName: {
+		fontSize: 15,
+		color: '#101318',
+		fontWeight: 'bold',
+		marginRight: 8,
+	},
+	screenName: {
+		fontSize: 15,
+		color: '#56636F',
+		fontWeight: 'bold',
+	},
+	textContent: {
+		lineHeight: 22,
+		color: '#101318',
+	},
+	detailView: {
+		marginTop: 7,
+		marginLeft: 'auto',
+		flexDirection: 'row',
+	},
+	text: {
+		color: '#969696',
+		fontSize: 15,
+		marginRight: 8,
+	},
+	arrow: {
+		width: 10,
+		height: 16,
+	}
+});
+
+export default NftGroupDetail;

src/pages/navigations/home.tsx

@@ -84,7 +84,7 @@ const Home = (props: Props) => {
 					</View>
 				</Pressable>
 				<View style={{ flexDirection: 'row' }}>
-					<NftGroupCard nftData={nftData} />
+					<NftGroupCard nftData={nftData} navigation={props.navigation} />
 				</View>
 			</SafeAreaView>
 		</LinearGradient>

src/static/img/icon/icon-arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 1.52344L8 8.00344L2 14.4834" stroke="#C1C1C1" stroke-width="1.5"/>
+</svg>