如何使用 Expo 在本機反應中打開默認聯系人應用程序？

Question

如何使用 Expo 在本機反應中打開默認的聯系人應用程序？

我的要求是：

1. 在主屏幕上顯示一個按鈕以打開通訊錄。
2. 單擊按鈕后，打開用戶手機中的聯系人列表。
3. 在聯系人列表中，每個聯系人項目應顯示聯系人的頭像、全名和號碼/號碼類型（家庭/工作）
4. 添加一個搜索欄，允許用戶按姓名搜索聯系人
5. 一旦用戶選擇了一個聯系人，go 返回主屏幕並在文本字段中顯示所選聯系人的電話號碼（不是作為警報/祝酒詞）。
6. 如果一個聯系人有多個電話號碼，則只允許用戶選擇一個電話號碼。

Answer 1

   import React, { useEffect, useState } from "react";       
   import {
StyleSheet,
View,
Text,
TextInput,
FlatList,
ActivityIndicator,
} from "react-native";
import * as Contacts from "expo-contacts";

export default function App() {
const [allcontacts, setcontact] = useState([]); //say set main state 
const [allcontactsfilter, setcontactfilter] = useState([]); // filter state
 const [searchcontact, setsearchcontact] = useState("");
const [loading, setloading] = useState(false);
 console.log(searchcontact);
 useEffect(() => {
   (async () => {
     const { status } = await Contacts.requestPermissionsAsync();
     if (status === "granted") {
       const { data } = await Contacts.getContactsAsync({
      fields: [
        Contacts.Fields.PhoneNumbers,
        //  Contacts.Fields.Emails
      ],
    });
    // console.log("collectio object", data);
    if (data.length > 0) {
      //   console.log("contact hellos", data);

      setcontact(data);

    setting same data in two-state help to manipulate state when we do filtering 
    process 

      setcontactfilter(data);
      setloading(false);
    }
  }
  })();
  setloading(true);
 }, []);

filter function

 const filtercontacts = (e) => {
const filtervalue = allcontactsfilter.filter((contact) => { <-- look here at 
   allcontactsfilter
  let lowercase = `${contact.firstName} ${contact.lastName}`.toLowerCase();
  let searchlowercase = e.toLowerCase();
  return lowercase.indexOf(searchlowercase) > -1;
});
setsearchcontact(setcontact(filtervalue)); 
};
  return (
 <View style={styles.container}>
  <TextInput
    style={{
      backgroundColor: "#D5D5D5",
      height: 40,
      width: "90%",
      borderBottomWidth: 0.3,
      borderBottomColor: "#ddd",
    }}
    placeholder="search"
    value={searchcontact}
    onChangeText={filtercontacts}
  />
  {loading ? (
    <View>
      <ActivityIndicator size={35} color="green" />
    </View>
  ) : null}

  <FlatList
    data={allcontacts}
    keyExtractor={(item, index) => index.toString()}
    renderItem={({ item }) => (
      <View style={{ minHeight: 70, padding: 5 }}>
        <Text>
          {/* {
            ("inside flatlist>>>,....",
            console.log(
              item.phoneNumbers == undefined || null
                ? []
                : item.phoneNumbers[0]?.number
            ))
          } */}
          {item?.firstName == null
            ? "please update name in your phone contact book"
            : item.firstName}
          {item?.lastName == null ? null : item.lastName}
        </Text>
        <Text style={{ color: "red" }}>
          {item.phoneNumbers == undefined || null
            ? []
            : item.phoneNumbers[0]?.number}
        </Text>
      </View>
    )}
    ListEmptyComponent={() => (
      <Text style={{ fontSize: 20, marginVertical: 40 }}>No contact </Text>
    )}
  />
  {/* {console.log("okstate..", allcontacts)} */}
   <Text>Contacts Module Example </Text>
   </View>
   );
  }

const styles = StyleSheet.create({
 container: {
  flex: 1,
  backgroundColor: "#fff",
alignItems: "center",
 justifyContent: "center",
},
});

根據您的需要應用樣式。