rn-app1/app/(tabs)/activity.tsx

import { ThemedView } from "@/components/themed-view";
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> */}
        <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}>
                <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>
  )
}

const styles = StyleSheet.create({
  safeAreaContainer: {
    // 确保 SafeAreaView 占据整个屏幕
    flex: 1,
    // 您可能还需要在这里设置背景颜色，以确保状态栏区域的颜色正确
    backgroundColor: '#ccc'
  },

  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: '体育',
  },
];