如何使用expo.contacts中的电话号码

Question

我正在创建一个移动应用程序，我想在其中列出我的联系人及其电话号码。 我正在使用 expo 联系人和 flatlist 组件，我想在其中显示联系人姓名和电话号码。

所以，问题是我不知道如何将电话号码添加到平面列表组件中。

const [ contact, setContact ] = useState([])

const getContacts = async () => {
    const { status } = await Contacts.requestPermissionsAsync()

    if (status === 'granted') {
        const { data } = await Contacts.getContactsAsync({
            fields: [Contacts.Fields.PhoneNumbers]
        })
        if (data.length > 0) {
            setContact(data)
            console.log(contact)
        }
    }
}

这是我获取联系人列表的函数。

Flatlist 组件：

<FlatList 
        keyExtractor={item => item.key} 
        renderItem={({item}) => 
          <View style={styles.listcontainer}>
            <Text style={styles.textProduct}>{item.name}</Text>
            <Text style={styles.textAmount}>{item.number}</Text>
          </View>}
        ItemSeparatorComponent={listSeparator} 
        data={contact} 
        
      /> 

console.log 显示该号码位于一个单独的数组中，位于从“getContacts”函数返回的对象内。

我不知道如何从数组中获取数字。我尝试使用 item.phoneNumbers.number 但无济于事。

感谢您前面的回复。我很高兴提供有关该问题的其他信息。

Answer 1

item.phoneNumbers

包含一个或多个数字。要从每个项目中获取第一个数字，您可以使用

item.phoneNumbers[0].number

。

Answer 2

item?.phoneNumbers && item?.phoneNumbers[0]?.number