React Native CLI中使用react-native-contacts@8.0.4时Contacts模块为null的原因排查

嘿，我来帮你捋捋这个Contacts为null的问题，我之前在项目里也踩过类似的坑，咱们从几个常见的方向排查：

• 导入方式不对：react-native-contacts升级到8.x版本后，导入方式变了！旧版本常用的import Contacts from 'react-native-contacts'在8.x里会返回null，得改成import * as Contacts from 'react-native-contacts'，或者直接解构需要的方法import { getAll } from 'react-native-contacts'，这个是最容易踩的坑。

• 自动链接没生效：React Native CLI的自动链接偶尔会掉链子，尤其是刚装完库或者升级版本后。你可以试试这些操作：

  • 先进入android目录执行./gradlew clean清理构建缓存，再回到根目录重新运行项目npx react-native run-android
  • 手动检查android/settings.gradle里有没有正确配置react-native-contacts的路径：

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

  • 确认app/build.gradle的dependencies里加上了implementation project(':react-native-contacts')

• 权限配置或运行时请求有问题：虽然你说加了权限，但可能有遗漏或者没真正拿到权限就调用方法了。Android 13及以上需要在AndroidManifest.xml里同时加这两个权限：

  <uses-permission android:name="android.permission.READ_CONTACTS" />
  <uses-permission android:name="android.permission.WRITE_CONTACTS" />
  

  而且一定要确保运行时请求到权限再调用Contacts.getAll()，比如用PermissionsAndroid做权限请求：

  import { PermissionsAndroid } from 'react-native';
  
  const requestContactsPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
        {
          title: '联系人权限申请',
          message: '应用需要访问你的联系人信息',
          buttonNeutral: '稍后再说',
          buttonNegative: '取消',
          buttonPositive: '确定',
        },
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        // 这里再调用Contacts.getAll()
        const contacts = await Contacts.getAll();
        console.log(contacts);
      } else {
        console.log('联系人权限被拒绝了');
      }
    } catch (err) {
      console.warn(err);
    }
  };
  

• 版本不兼容：react-native-contacts@8.0.4对React Native的版本有要求，比如需要RN 0.68及以上版本。你可以去node_modules/react-native-contacts/package.json里看peerDependencies的要求，要是你的RN版本太低，也会导致模块加载失败。

• 缓存搞的鬼：Metro的缓存有时候会抽风，导致模块加载异常。试试重置缓存重启服务：npx react-native start --reset-cache，或者干脆删除node_modules重新安装：rm -rf node_modules && npm install

备注：内容来源于stack exchange，提问作者Abduvali Nazirov