Expo Go端Cart页面无内容，Web端正常[React Native]问题排查

我有一个名为Wikuhotel的Expo React Native项目，Web端打开Cart.tsx页面显示完全正常，但通过Expo Go在手机端打开时页面无内容。已打印从Menu获取的Local参数，结果显示正常；Web端预期显示效果正常。

相关代码 #

Cart.tsx #

const Cart = () => {
  const router = useRouter();
  const localParams = useLocalSearchParams<{
    menus: string;
    itemPrices: string;
    total: string;
  }>();
  console.log(localParams);
  const [menus] = useState(localParams.menus.split(", "));
  const [prices] = useState(
    localParams.itemPrices.split(", ").map((price) => Number(price))
  );
  const [total] = useState(Number(localParams.total));

  return (
    <SafeAreaView>
      <CartComp itemPrices={prices} menus={menus} total={total} />
    </SafeAreaView>
  );
};

CartComp.tsx #

const CartComp = ({
  menus,
  itemPrices,
  total,
}: {
  menus: string[];
  itemPrices: number[];
  total: number;
}) => {
  const data = menus.map((menu, index) => ({
    menu,
    price: itemPrices[index],
  }));

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Order list</Text>

      <FlatList
        data={data}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <View style={styles.itemContainer}>
            <Text style={styles.itemText}>{item.menu}</Text>
            <Text style={styles.priceText}>${item.price.toFixed(2)}</Text>
          </View>
        )}
      />

      <View style={styles.totalContainer}>
        <Text style={styles.totalText}>Total: ${total.toFixed(2)}</Text>
      </View>
    </View>
  );
};

可能的原因及解决方法 #

• SafeAreaView未设置布局样式：Web端布局默认会填充空间，但手机端的SafeAreaView如果没有设置flex:1，子组件可能无法获得足够显示空间。修改Cart.tsx中的SafeAreaView：

  <SafeAreaView style={{ flex: 1 }}>
    <CartComp itemPrices={prices} menus={menus} total={total} />
  </SafeAreaView>
  

• CartComp容器未设置flex布局：检查styles.container是否添加了flex:1，如果容器没有占满父组件空间，FlatList无法正常渲染内容。修改样式：

  container: {
    flex: 1,
    padding: 16,
  }
  

• FlatList未设置尺寸：给FlatList添加flex:1属性，确保它能在容器内占据可用空间：

  <FlatList
    style={{ flex: 1 }}
    data={data}
    keyExtractor={(item, index) => index.toString()}
    renderItem={({ item }) => (
      <View style={styles.itemContainer}>
        <Text style={styles.itemText}>{item.menu}</Text>
        <Text style={styles.priceText}>${item.price.toFixed(2)}</Text>
      </View>
    )}
  />
  

• 参数分割容错缺失：虽然打印参数显示正常，但可添加容错处理避免空值或格式错误导致渲染失败：

  const [menus] = useState(localParams.menus ? localParams.menus.split(", ") : []);
  const [prices] = useState(
    localParams.itemPrices ? localParams.itemPrices.split(", ").map((price) => Number(price)) : []
  );
  

内容的提问来源于stack exchange，提问作者Lowercase_