TestFlight构建中@react-native-community/datetimepicker与@react-native-picker/picker组件显示异常求助

大家好，我最近碰到个头疼的问题，想请教下有没有同行遇到过类似情况：

我的项目依赖版本如下：

"@react-native-community/datetimepicker": "8.4.1",
"@react-native-picker/picker": "2.11.1",
"expo": "53.0.18"

当通过TestFlight构建并测试时，这两个选择器组件（日期时间选择器和普通选择器）都出现了显示异常的情况（如附件图片所示）。虽然它们还能交互，但完全摸不准可点击的热区在哪里。

我已经尝试过去掉组件的自定义样式，以为是样式导致的问题，但并没有解决。我是直接按照依赖包的默认方式使用组件的，代码如下：

Picker组件代码：

<Picker 
  selectedValue={value} 
  onValueChange={onValueChange} 
  style={[styles.picker, { fontSize: 16, fontFamily: 'System' }]} 
> 
  {items.map((item) => ( 
    <Picker.Item key={item.value} label={item.label} value={item.value} /> 
  ))} 
</Picker>

DateTimePicker组件代码：

<DateTimePicker 
  value={dateOfBirth || new Date()} 
  mode="date" 
  display="spinner" 
  onChange={onDateChange} 
  maximumDate={new Date()} 
  style={{ height: 200, width: '100%' }} 
/>

有没有朋友知道该怎么解决这个问题？万分感谢！

可能的解决方案建议： #

• 检查版本兼容性：Expo 53对应的React Native版本是0.74.x，建议确认这两个picker包是否明确支持该版本。有些包在大版本RN更新后，可能会出现iOS渲染适配问题，可以去查看它们的Release Notes确认适配情况。
• 调整DateTimePicker的display模式：你当前用的是display="spinner"，可以尝试换成display="default"或者inline模式试试。Spinner模式在iOS生产环境下偶尔会出现渲染bug，不同iOS版本表现可能不同。
• 清除构建缓存重新构建：Expo的缓存有时候会导致生产构建出现奇怪的问题，试试执行expo r -c清除本地缓存，然后重新运行eas build生成TestFlight包，确保构建是完全干净的。
• 去掉自定义字体设置：你在Picker里指定了fontFamily: 'System'，可以先去掉这个配置试试。有时候生产环境下系统字体的指定方式不正确，会导致组件渲染异常。
• 真机调试生产构建：不要只依赖TestFlight，试试生成开发版的真机构建（eas build --profile development --platform ios），安装到设备上测试是否复现问题，这样能区分是生产构建本身的问题，还是TestFlight分发导致的特殊情况。

内容来源于stack exchange