暂存数据

app/(tabs)/activity.tsx

@@ -1,12 +1,40 @@
 import { ThemedView } from "@/components/themed-view";
-import { Text, SafeAreaView, StyleSheet, View, FlatList, ScrollView, TouchableOpacity } from "react-native";
+import { Text, SafeAreaView, StyleSheet, View, FlatList, ScrollView, TouchableOpacity, Dimensions } from "react-native";
+const screenWidth = Dimensions.get('window').width;
+// const customWidth = screenWidth * 0.8; // 占屏幕宽度的 80%
+
+
 // import Swiper from 'react-native-swiper';
 
+
 export default function ActivityScreen() {
   return (
     // SafeAreaView 适配顶部刘海
-    <SafeAreaView style={styles.safeAreaContainer}> /
-      <ThemedView><Text>活动</Text></ThemedView>
+    <SafeAreaView style={styles.safeAreaContainer}>
+      <ThemedView>
+        {/* <Text>活动</Text> */}
+        <View style={styles.content1} >
+          <View style={styles.leftWrapper}>
+            <FlatList
+              data={letTypeList}
+              renderItem={({ item }) => <LeftItem title={item.title} />}
+              keyExtractor={item => item.id}
+              style={styles.contentLeft}
+            />
+          </View>
+
+          <View style={styles.contentRight}>
+            <Text>2222</Text>
+          </View>
+        </View>
+
+
+
+
+      </ThemedView>
+
+
+
 
       {/* <Swiper style={styles.wrapper} showsButtons>
             <View style={styles.slide1}>
@@ -19,9 +47,6 @@ export default function ActivityScreen() {
                 <Text style={styles.text}>And simple</Text>
             </View>
         </Swiper> */}
-
-
-
     </SafeAreaView>
   )
 }
@@ -33,30 +58,106 @@ const styles = StyleSheet.create({
     // 您可能还需要在这里设置背景颜色，以确保状态栏区域的颜色正确
     backgroundColor: '#ccc'
   },
-  wrapper: {
-  },
-  slide1: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: '#9DD6EB'
-  },
-  slide2: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: '#97CAE5'
-  },
-  slide3: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: '#92BBD9'
-  },
-  text: {
-      color: '#fff',
-      fontSize: 30,
-      fontWeight: 'bold'
-  }
-});
 
+  content1: {
+    // display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    // backgroundColor: 'hotpink',
+    // width: 375,
+  },
+  leftWrapper: {
+    width: 80, // 固定宽度
+    height: 180,
+    backgroundColor: 'yellow',
+  },
+  contentLeft: {
+    // backgroundColor: 'yellow',
+    // width: 100,
+    // flexShrink: 0, 
+    // width: 20,
+  },
+  leftItem: {
+    backgroundColor: 'pink',
+    // padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+    // width: 20,
+
+  },
+  leftTitle: {
+    fontSize: 14,
+    textAlign: 'center',
+    // width: 20,
+
+  },
+  contentRight: {
+    backgroundColor: 'skyblue',
+    flex: 1,
+  }
+
+
+
+
+
+
+  // wrapper: {
+  // },
+  // slide1: {
+  //   flex: 1,
+  //   justifyContent: 'center',
+  //   alignItems: 'center',
+  //   backgroundColor: '#9DD6EB'
+  // },
+  // slide2: {
+  //   flex: 1,
+  //   justifyContent: 'center',
+  //   alignItems: 'center',
+  //   backgroundColor: '#97CAE5'
+  // },
+  // slide3: {
+  //   flex: 1,
+  //   justifyContent: 'center',
+  //   alignItems: 'center',
+  //   backgroundColor: '#92BBD9'
+  // },
+  // text: {
+  //   color: '#fff',
+  //   fontSize: 30,
+  //   fontWeight: 'bold'
+  // }
+});
+type ItemProps = { title: string };
+
+const LeftItem = ({ title }: ItemProps) => (
+  <View style={styles.leftItem}>
+    <Text style={styles.leftTitle}>{title}</Text>
+  </View>
+);
+
+const letTypeList = [
+  {
+    id: '0',
+    title: '捕鱼',
+  },
+  {
+    id: '1',
+    title: '真人',
+  },
+  {
+    id: '2',
+    title: '区块链',
+  },
+  {
+    id: '3',
+    title: '棋牌',
+  },
+  {
+    id: '4',
+    title: '电子',
+  },
+  {
+    id: '5',
+    title: '体育',
+  },
+];