React Native FlatList在Expo Go中不渲染但Web端正常的问题求助

问题分析与解决方案 #

你遇到的这个问题属于React Native Web与Native环境的渲染差异导致的典型问题，我帮你梳理几个关键修复点：

1. 缺失StyleSheet导入

你的代码里使用了StyleSheet.create但没有从react-native中导入StyleSheet，这在Native环境（Expo Go）中会直接抛出错误导致组件无法渲染，而Web端有容错机制所以能正常运行。

修复： 在导入语句中补全StyleSheet：

import { useState } from "react";
import { FlatList, View, Text, StyleSheet } from "react-native"; // 补全StyleSheet导入

2. keyExtractor返回值类型错误

React要求列表项的key必须是字符串类型，你直接返回数字类型的item.id，Web端可以兼容，但Native环境下会触发渲染异常。

修复： 将id转为字符串：

keyExtractor={(item) => item.id.toString()}

3. FlatList布局约束问题

虽然你给FlatList设置了固定宽高，但在Native环境中，FlatList需要明确的布局约束才能正确渲染。建议启用flex:1让它自适应父容器空间，同时保留固定尺寸作为适配 fallback：

list: {
  flex: 1, // 启用flex获取父容器布局空间
  paddingTop: 30,
  width: 300,
  height: 300
},

4. Text组件可见性验证

你的Text组件背景色是#fff，如果父容器默认背景也是白色，会导致文字和背景混淆，看起来像“未渲染”。可以临时修改样式验证：

test: {
  width: 100,
  height: 100,
  backgroundColor: "#eee", // 改用浅灰色区分背景
  color: "#000" // 明确设置文字颜色
},

修复后的完整代码 #

import { useState } from "react";
import { FlatList, View, Text, StyleSheet } from "react-native";

const HomeScreen = () => {
  const [test, setTest] = useState([
    { id: 1, test: 100.10 },
    { id: 2, test: -19.20 },
    { id: 3, test: 22.99 },
  ]);

  return (
    <View style={styles.container}>
      <FlatList
        data={test}
        style={styles.list}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <Text style={styles.test}> Test </Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    width: "100%", // 用百分比适配不同设备，替代固定400宽度
    backgroundColor: "#f5f5f5" // 设置父容器背景，方便区分
  },
  list: {
    flex: 1,
    paddingTop: 30,
    width: "90%", // 用百分比适配
    maxWidth: 300,
    height: 300
  },
  test: {
    width: 100,
    height: 100,
    backgroundColor: "#eee",
    color: "#000",
    textAlign: "center",
    lineHeight: 100 // 让文字垂直居中，更直观
  },
});

export default HomeScreen;

额外建议：Native开发尽量避免使用固定像素值做容器宽度，改用百分比或flex适配不同尺寸设备，这是Native开发的最佳实践。如果修改后仍有问题，可以打开Expo Go的开发者菜单，启用Remote JS Debugging查看控制台报错信息，日志通常会给出明确的问题提示。

内容来源于stack exchange