React Native 0.68.2下@react-native-picker/picker找不到依赖报错

执行npm i @react-native-picker/picker并按规范引入组件后，运行时报错：@react-native-picker/picker could not be found within the project or in these directories: node_modules ..\node_modules，使用的测试代码如下：

class testingPicker extends Component {

  state = {
    language:'a'
  }

  render(){
    return(
      <View>
        <Picker 
          style={{width:'100%'}}
          
        >

          {/* Adding options to picker */}
          <Picker.Item label="A" value="a"/>
          <Picker.Item label="B" value="b"/>

        </Picker>
      </View>
    )
  }
}
export default testingPicker;

解决步骤 #

按顺序排查处理即可：

• 先对齐依赖版本：@react-native-picker/picker 2.5.0及以上版本最低支持RN 0.69，和0.68.2版本不兼容，先执行命令安装适配版本：

  npm uninstall @react-native-picker/picker
  npm i @react-native-picker/picker@2.4.8
  

• 清理缓存重装依赖：删除项目根目录下的node_modules文件夹、package-lock.json文件，重新执行npm install完成全量依赖安装。
• 补全原生端配置（RN 0.68版本Windows端开发不会自动完成原生链接）：
  1. 安卓端打开android/settings.gradle，补充以下配置：

  include ':@react-native-picker_picker'
  project(':@react-native-picker_picker').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-picker/picker/android')
  

  2. 打开android/app/build.gradle，在dependencies块中补充：

  implementation project(':@react-native-picker_picker')
  

  3. 进入android目录执行./gradlew clean清理原生构建缓存；如果是iOS端，进入ios目录执行pod install完成iOS端依赖链接。
• 清理Metro打包缓存：不要复用之前启动的Metro服务，执行以下命令重启服务并清空旧缓存：

  npx react-native start --reset-cache
  

• 修正测试代码的问题：
  1. 类组件名首字母必须大写，否则React会将其识别为原生网页标签触发报错，把testingPicker改成TestingPicker
  2. Picker组件必须绑定selectedValue和onValueChange属性才能正常工作，修正后的完整代码如下：

  import React, { Component } from 'react';
  import { View } from 'react-native';
  import { Picker } from '@react-native-picker/picker';
  
  class TestingPicker extends Component {
    state = {
      language: 'a'
    }
  
    render() {
      return (
        <View>
          <Picker
            style={{width: '100%'}}
            selectedValue={this.state.language}
            onValueChange={(value) => this.setState({language: value})}
          >
            <Picker.Item label="A" value="a" />
            <Picker.Item label="B" value="b" />
          </Picker>
        </View>
      )
    }
  }
  export default TestingPicker;
  

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