React Native中FlatList渲染Item时Android测试环境崩溃问题排查

问题1：renderItem中错误添加不稳定的key #

你在renderItem里给<Appointment>组件手动添加了key={String(item.therapist.name + Math.random)}，这会引发两个致命问题：

• Math.random()每次渲染都会生成新值，导致组件频繁重新挂载，触发性能异常甚至崩溃
• 若存在同名治疗师，会出现重复key，FlatList的渲染逻辑会彻底混乱

修复方案：删除renderItem中手动设置的key，FlatList已经通过keyExtractor指定了唯一标识，无需额外设置：

renderItem={({ item }) => {
    return (
        <Appointment
            appointment={item}
            navigation={navigation}
        />
    );
}}

问题2：FastImage加载无效/空的头像地址 #

内部测试环境返回的appointment.therapist.avatar可能为null或空字符串，而本地环境有有效地址，导致FastImage在Android环境加载失败崩溃。

修复方案：给FastImage添加空值判断或默认占位图：

<FastImage
    source={{ 
        uri: appointment.therapist.avatar || 'https://你的默认头像地址', 
        priority: FastImage.priority.high 
    }}
    // 保留原有样式
/>

或者先判断地址是否存在，不存在则显示占位元素：

{appointment.therapist.avatar ? (
    <FastImage
        source={{ uri: appointment.therapist.avatar, priority: FastImage.priority.high }}
        // 保留原有样式
    />
) : (
    <View style={{/* 占位图样式，比如圆形灰色背景 */}} />
)}

问题3：wp(150)的宽度超出屏幕范围 #

wp(150)代表屏幕宽度的150%，远超出设备屏幕边界，Android的布局引擎对这种溢出的处理更严格，可能引发布局崩溃。

修复方案：将maxWidth改为合理的百分比，比如wp(90)：

<View style={{ flexDirection: "row", alignItems: "center", maxWidth: wp(90) }}>

问题4：formatDateTime函数的潜在异常 #

若测试环境中appointment.date_time为null、undefined或不符合函数解析的格式，会导致函数抛出错误引发崩溃。

修复方案：调用函数前添加空值判断：

<Text style={{ fontSize: 14, fontFamily: fontConfig.regular, color: 'black', marginTop: hp(2) }}>
    {appointment.date_time ? formatDateTime(appointment.date_time) : '日期异常'}
</Text>

内容的提问来源于stack exchange，提问作者Patrícia Ferreira