save

app/(tabs)/activity.tsx

@@ -1,11 +1,27 @@
 import { ThemedView } from "@/components/themed-view";
-import { Text, SafeAreaView, StyleSheet } from "react-native";
+import { Text, SafeAreaView, StyleSheet, View, FlatList, ScrollView, TouchableOpacity } from "react-native";
+// import Swiper from 'react-native-swiper';
 
 export default function ActivityScreen() {
   return (
     // SafeAreaView 适配顶部刘海
     <SafeAreaView style={styles.safeAreaContainer}> /
       <ThemedView><Text>活动</Text></ThemedView>
+
+      {/* <Swiper style={styles.wrapper} showsButtons>
+            <View style={styles.slide1}>
+                <Text style={styles.text}>Hello Swiper</Text>
+            </View>
+            <View style={styles.slide2}>
+                <Text style={styles.text}>Beautiful</Text>
+            </View>
+            <View style={styles.slide3}>
+                <Text style={styles.text}>And simple</Text>
+            </View>
+        </Swiper> */}
+
+
+
     </SafeAreaView>
   )
 }
@@ -15,12 +31,32 @@ const styles = StyleSheet.create({
     // 确保 SafeAreaView 占据整个屏幕
     flex: 1,
     // 您可能还需要在这里设置背景颜色，以确保状态栏区域的颜色正确
-    backgroundColor: 'pink'
+    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'
+  }
 });
+

package-lock.json

@@ -31,6 +31,7 @@
         "react-native-reanimated": "~4.1.1",
         "react-native-safe-area-context": "~5.6.0",
         "react-native-screens": "~4.16.0",
+        "react-native-swiper": "^1.6.0",
         "react-native-web": "~0.21.0",
         "react-native-worklets": "0.5.1"
       },
@@ -10316,7 +10317,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -10328,7 +10328,6 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/punycode": {
@@ -10619,6 +10618,15 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-swiper": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/react-native-swiper/-/react-native-swiper-1.6.0.tgz",
+      "integrity": "sha512-OnkTTZi+9uZUgy0uz1I9oYDhCU3z36lZn+LFsk9FXPRelxb/KeABzvPs3r3SrHWy1aA67KGtSFj0xNK2QD0NJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.5.10"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.21.2",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.21.2.tgz",

package.json

@@ -34,6 +34,7 @@
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",
+    "react-native-swiper": "^1.6.0",
     "react-native-web": "~0.21.0",
     "react-native-worklets": "0.5.1"
   },