FlatList 反应原生自动中心

Question

我写了这段代码：

<View style={styles.container}>
    <FlatList
        data={data}
        style={styles.menu}
        renderItem={({item, index})=>
            <TouchableOpacity>
                <View style={styles.menuItem}>
                    <Text style={item.active ? styles.menuItemTextActive : {}}>{item.title}</Text>
                </View>
            </TouchableOpacity>
        }
        showsHorizontalScrollIndicator={false}
        horizontal
    />
</View>

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    menu:{
        width: "100%",
        paddingVertical: 5,
        flexGrow: 0,
    },
    menuItem:{
        paddingHorizontal: 10,
        paddingVertical: 5,
        borderWidth: 1,
        borderColor: '#CCC',
        borderRadius: 10,
        marginHorizontal: 3,
    },
});

但是 items 是自动滚动到中心的，如下图：

我不想要这个。我希望它们通常都与左右相同。就像吹的图片：

我还重置了 NodeJS 服务器缓存，但问题仍未解决。第一次写没问题，不知道怎么一下子就出现了这个问题

这是我的数据如果有帮助：

const [data, setData] = useState([
        {
            title: 'پرفروش‌ترین‌ها',
            order: '`buy` DESC',
            active: true
        },
        {
            title: 'پرسودترین‌ها',
            order: '(`price` - `primary_price`) DESC',
            where: '`primary_price` > 0'
        },
        {
            title: 'کم‌فروش‌ترین‌ها',
            order: '`buy` ASC',
        },
        {
            title: 'کم‌ترین موجودی',
            order: '`qty`',
            where: '`qty` > -1'
        },
        {
            title: 'کم‌سودترین‌ها',
            order: '(`price` - `primary_price`) ASC',
            where: '`primary_price` > 0'
        },
        {
            title: 'بیش‌ترین موجودی',
            order: '`qty` DESC',
            where: "`qty` > -1 AND `qty` != ''"
        },
        {
            title: 'پرسودترین فاکتورها',
            order: '`profit` DESC',
            where: '`profit` > 0',
            type: 'invoice'
        },
        {
            title: 'پرتعدادترین فاکتورها',
            order: '`count` DESC',
            type: 'invoice'
        },
        {
            title: 'گران‌ترین‌‌ها',
            order: '`price` DESC',
        },
        {
            title: 'ارزان‌ترین‌ها',
            order: '`price` ASC',
        },
        {
            title: 'بدون‌نام‌ها',
            where: "`name` = ''",
            
        },
        {
            title: 'بدون‌موجودی‌ها',
            order: '`qty` DESC',
            where: "`qty` < 1",
            
        },
        {
            title: 'بدون‌قیمت‌خریدها',
            where: "`primary_price` < 1",
            
        },
    ]);

Answer 1

您可以使用平面列表的 contentContainerStyle 属性并在中心对齐项目。它应该看起来像这样。

   contentContainerStyle={{
        alignItems: 'center',
      }}

Answer 2

export const MyStyledList = styled(FlatList).attrs({
  contentContainerStyle: {
    flexGrow: 1, justifyContent: 'center'
  },
})``;

而不是 FlatList 渲染 MyStyledList