Android 如何使用Expo在react native中打开默认联系人应用程序？

如何使用Expo在react native中打开默认联系人应用程序

我的要求是：

在主屏幕上显示打开联系人簿的按钮

单击按钮，打开用户手机中的联系人列表

在联系人列表中，每个联系人项目都应显示联系人的个人资料图片、全名和号码/类型（家庭/工作）

添加一个搜索栏，允许用户按姓名搜索联系人

用户选择联系人后，返回主屏幕并在文本字段中显示所选联系人的电话号码（而不是作为提醒/祝酒词）

如果联系人有多个电话号码，则只允许用户选择一个电话号码

过滤功能

 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",
},
});

const filtercontacts=（e）=>{
常量filtervalue=allcontactsfilter.filter（（contact）=>{-1；
});
setsearchcontact（setcontact（filtervalue））；
};
返回(
{加载(
)：null}
index.toString（）}
renderItem={（{item}）=>(
{/* {
（“内部平面列表>>>，…”，
console.log(
item.PhoneNumber==未定义| |空
? []
：item.phonenumber[0]？.number
))
} */}
{item？.firstName==null
？“请更新您的电话联系簿中的姓名”
：item.firstName}
{item？.lastName==null？null:item.lastName}
{item.phoneNumbers==未定义的| | null
? []
：item.phoneNumbers[0]？.number}
)}
ListMPtyComponent={（）=>(
没有联系
)}
/>
{/*{console.log（“okstate..”，allcontacts）}*/}
联系人模块示例
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“fff”，
对齐项目：“中心”，
辩护内容：“中心”，
},
});

根据您的需要应用样式

 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",
},
});