Windows运行Expo React Native应用出现Error 500的解决求助

1. 替换依赖的具体步骤 #

• 卸载旧的社区Picker依赖：

  npm uninstall react-native-picker-select
  # 若使用Yarn则执行：
  # yarn remove react-native-picker-select
  

• 安装官方兼容Expo的Picker包：

  npx expo install @react-native-picker/picker
  

2. 替换代码中的组件引用 #

旧的react-native-picker-select组件API与官方Picker不同，需要调整代码：

• 旧代码示例：

  import RNPickerSelect from 'react-native-picker-select';
  
  <RNPickerSelect
    onValueChange={(value) => handleValueChange(value)}
    items={[
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' },
    ]}
  />
  

• 替换为官方Picker的代码示例：

  import { Picker } from '@react-native-picker/picker';
  import { useState } from 'react';
  
  const [selectedValue, setSelectedValue] = useState('1');
  
  <Picker
    selectedValue={selectedValue}
    onValueChange={(itemValue) => setSelectedValue(itemValue)}
  >
    <Picker.Item label="选项1" value="1" />
    <Picker.Item label="选项2" value="2" />
  </Picker>
  

注意：官方Picker需通过子组件<Picker.Item>定义选项，而非items属性，其他props需参考官方组件的用法调整。

3. 清理缓存并重启项目 #

执行以下命令清除Expo缓存，避免残留问题：

npx expo start --clear

关于Windows端问题的解决有效性 #

完全可以解决。Windows端报错的核心原因是react-native-picker-select依赖@react-native-picker/picker但该依赖未被正确安装（Mac端可能因缓存、间接依赖自动安装等原因规避了这个问题）。迁移到官方Picker后，你直接依赖官方维护的包，不存在依赖缺失问题，打包时模块可正常解析，从而修复Android Bundling失败的报错。

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