如何使用React Native Expo获取手机通讯录？及实现失败求助

Hey there! Let's break down both your questions about working with phone contacts in React Native Expo—first a step-by-step guide to implementation, then troubleshooting tips if you're hitting snags.

Here's how to reliably fetch and display phone contacts in your Expo project:

• Install the expo-contacts package
  Start by adding the official Expo contacts library to your project. Run this command in your terminal:

  npx expo install expo-contacts
  

  This will install the version compatible with your current Expo SDK, avoiding version mismatch issues.

• Request user permissions & fetch contacts
  Contacts are sensitive data, so you must first ask the user for permission. Here's a complete component example that handles permission requests, fetches contacts, and displays them:

  import React, { useState, useEffect } from 'react';
  import { View, Text, Button, FlatList, StyleSheet } from 'react-native';
  import * as Contacts from 'expo-contacts';
  
  export default function ContactScreen() {
    const [contacts, setContacts] = useState([]);
    const [permissionGranted, setPermissionGranted] = useState(false);
  
    useEffect(() => {
      setupContacts();
    }, []);
  
    const setupContacts = async () => {
      // Request permission first
      const { status } = await Contacts.requestPermissionsAsync();
      if (status === 'granted') {
        setPermissionGranted(true);
        // Fetch contacts with phone numbers (adjust fields as needed)
        const { data } = await Contacts.getContactsAsync({
          fields: [Contacts.Fields.Name, Contacts.Fields.PhoneNumbers],
        });
        setContacts(data);
      } else {
        setPermissionGranted(false);
      }
    };
  
    return (
      <View style={styles.container}>
        {!permissionGranted && (
          <Text style={styles.permissionText}>
            Contact permissions are required to view your contacts. Please enable them in your device settings.
          </Text>
        )}
        <Button title="Refresh Contacts" onPress={setupContacts} />
        <FlatList
          data={contacts}
          keyExtractor={(contact) => contact.id}
          renderItem={({ item }) => (
            <View style={styles.contactItem}>
              <Text style={styles.contactName}>{item.name}</Text>
              {item.phoneNumbers?.map((num, idx) => (
                <Text key={idx} style={styles.contactNumber}>{num.number}</Text>
              ))}
            </View>
          )}
        />
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: { padding: 20, flex: 1 },
    permissionText: { marginBottom: 15, color: '#ff4444' },
    contactItem: { paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#eee' },
    contactName: { fontSize: 16, fontWeight: '600' },
    contactNumber: { fontSize: 14, color: '#666' },
  });
  

• Configure platform-specific permissions in app.json
  Expo requires explicit permission declarations for iOS and Android. Update your app.json to include these:

  {
    "expo": {
      "ios": {
        "infoPlist": {
          "NSContactsUsageDescription": "We need access to your contacts to [explain your specific use case, e.g., sync contacts with your app]"
        }
      },
      "android": {
        "permissions": ["READ_CONTACTS"]
      }
    }
  }
  

  For iOS, the description text is mandatory—users will see this when prompted for permission, so be clear about why you need access.

If you're not able to fetch contacts, try these common fixes:

• Confirm permission status
  If the user denied permission, your app can't access contacts. Check the status value returned from requestPermissionsAsync—if it's denied, add a prompt to guide users to their device settings to enable permissions.

• Check for version mismatches
  If you installed expo-contacts manually (without npx expo install), it might not be compatible with your Expo SDK version. Run npx expo install expo-contacts again to install the correct version.

• Verify app.json configuration
  Missing the NSContactsUsageDescription on iOS will cause permission requests to fail silently. Double-check that this is present and filled in. On Android, ensure READ_CONTACTS is listed in the permissions array.

• Debug async logic
  Make sure you're using async/await correctly—don't try to fetch contacts before the permission request resolves. Add console.log statements to check:

  console.log('Permission status:', status);
  console.log('Fetched contacts:', data);
  

  This will help you see if permissions are granted and if any contacts are being returned.

• Test on a physical device
  Emulators/simulators sometimes have limited access to system features like contacts. Try testing your app on a real iOS or Android device to rule out emulator-specific issues.

内容的提问来源于stack exchange，提问作者Syed Abdul Rehman