使居中的React本地FlatList项目始终处于活动状态

npm install react-native-flatlist --save

import React, { Component } from 'react';
import { View, FlatList } from 'react-native';
import FlatListItem from './FlatListItem'; // 自定义的列表项组件

state = {
  data: [
    { id: 1, title: 'Item 1' },
    { id: 2, title: 'Item 2' },
    { id: 3, title: 'Item 3' },
    // 其他数据项...
  ],
  activeIndex: 0,
};

render() {
  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={this.state.data}
        renderItem={({ item, index }) => (
          <FlatListItem
            item={item}
            index={index}
            isActive={index === this.state.activeIndex}
            onPress={() => this.setState({ activeIndex: index })}
          />
        )}
        keyExtractor={item => item.id.toString()}
        horizontal
        contentContainerStyle={{ alignItems: 'center' }}
      />
    </View>
  );
}

import React from 'react';
import { Text, TouchableOpacity, StyleSheet } from 'react-native';

const FlatListItem = ({ item, index, isActive, onPress }) => (
  <TouchableOpacity
    style={[styles.item, isActive && styles.activeItem]}
    onPress={onPress}
  >
    <Text style={styles.title}>{item.title}</Text>
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  item: {
    padding: 10,
    margin: 5,
    borderRadius: 5,
    backgroundColor: '#e0e0e0',
  },
  activeItem: {
    backgroundColor: '#ff9800',
  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
  },
});

export default FlatListItem;