React Native横向ScrollView突然消失问题求助

各位好，我遇到一个挺棘手的小问题：我的React Native应用里有个Categories组件，原本是在横向ScrollView里展示带emoji的分类胶囊按钮，之前渲染都正常，最近突然整个组件从屏幕上消失了——控制台完全没报错，但就是看不到任何内容。

我已经做了这些排查工作：

• 确认映射的数据源有效：categories是emojiMap的键数组，打印出来内容完全正确
• getEmoji()函数工作正常，控制台输出的每个分类对应的emoji都能正确显示
• 组件确实已经挂载，但就是没有任何视觉渲染效果
• 关键发现：只有当ScrollView设置为横向（horizontal）时才会出现这个问题，如果去掉horizontal属性，内容就能正常显示出来

下面是我的完整代码，麻烦各位帮忙看看哪里出了问题：

import React, { useEffect } from "react";
import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
import emojiList from 'emoji.json';

const emojiMap: Record<string, string> = {
  Birthday: 'party popper',
  Bridal: 'bouquet',
  Halloween: 'jack-o-lantern',
  'Book Day': 'open book',
  Engaged: 'ring',
  'Dad': 'necktie',
  Graduate: 'graduation cap',
  'Mum': 'red heart',
  'New Born': 'baby bottle',
  Religious: 'crescent moon',
  Wedding: 'love letter',
};

type EmojiItem = { name: string; char: string };

function getEmoji(label: string) {
  const name = emojiMap[label];
  if (!name) return '❓';
  const found = (emojiList as EmojiItem[]).find(e => e.name.toLowerCase() === name.toLowerCase());
  return found ? found.char : '❓';
}

export default function Categories(){
  useEffect(() => {
    categories.forEach(label => {
      console.log(`${label}:`, getEmoji(label));
    });
  }, [])

  const categories = Object.keys(emojiMap);

  return (
    <>
      <View style={styles.subTitleContainer}>
        <Text style={{fontSize: 18, fontFamily: 'Lexend-SemiBold', color: "#3A3D46"}}>Explore by Theme</Text>
        {/* <Text style={{fontSize: 16, fontFamily: 'Inter-Medium', color: "#93939B"}}>View All</Text> */}
      </View>
      <ScrollView horizontal showsHorizontalScrollIndicator={false} >
        <View style={{marginHorizontal: 10, flexDirection: "row"}}>
          {categories.map((label: string) => (
            <TouchableOpacity key={label} style={styles.categoryPill}>
              <View style={styles.categoryIconContainer}>
                <Text style={styles.emoji}>{getEmoji(label)}</Text>
              </View>
              <Text style={styles.categoryLabel}>{label}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
    </>
  )
}

const styles = StyleSheet.create({
  subTitleContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 20,
    marginLeft: 15,
    marginRight: 25,
    alignItems: "center",
  },
  categoryContainer: {
    alignItems: "center",
    marginTop: 25,
    marginHorizontal: 4,
    width: 85,
  },
  categoryPill: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f65c3b',
    borderRadius: 25,
    paddingVertical: 6,
    paddingHorizontal: 12,
    marginTop: 25,
    marginHorizontal: 6,
    minWidth: 120,
  },
  categoryIconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 8,
  },
  emoji: {
    fontSize: 20,
    textAlign: 'center',
  },
  categoryLabel: {
    fontSize: 14,
    fontFamily: 'Lexend-SemiBold',
    color: '#FFFFFF',
    flex: 1,
  }
});

我已经卡了好一会儿了，实在找不到问题根源，希望有经验的朋友能帮我指点一下，谢谢！

内容来源于stack exchange