javascript - 使用 React Native 对电话联系人进行排序
问题描述
我的 react-native 应用程序向拥有我的应用程序的用户电话簿中的联系人发送类似于消息的内容。因此,当用户注册时,他们只注册使用我的应用程序,他们只注册他们的电话号码。在向联系人发送消息时。我访问他们的电话簿并将其与我在 Rails 后端中的号码进行比较。如果他们匹配用户电话簿中的号码。然后我从他们的电话簿中提取姓名并将其与号码一起显示给他们,以便向该联系人发送消息。
问题是它们是随机排序的。我希望他们按字母顺序排序。编号来自 BE(Rails),名称来自 FE(React-Native)应用程序。我知道我需要将它们都放入 FE 上的某种数组中,然后对它们进行排序。不幸的是,我的 Javascript 和 React-Native 技能仍然有些薄弱。我理论上知道我需要做什么,但我似乎无法让它发挥作用。
我当然遗漏了相当多的代码,只留下了重要的部分。第一部分展示了三个函数“parseContacts、fetchContacts、getContactName。
"fetchContacts" 从 BE 获取电话号码。“getContactName”从电话簿中获取名称。“parseContacts”按照它在锡上说的做。
async parseContacts(contacts) {
let numbers = [];
contacts.forEach(element => {
element.contactNumber = element.phoneNumbers[0] ? element.phoneNumbers[0].number.replace(/[^a-zA-Z0-9]/g, '') : '';
element.phoneNumbers[0] ? numbers.push(element.phoneNumbers[0].number.replace(/[^a-zA-Z0-9]/g, '')) : null;
});
this.setState({ phoneContacts: contacts })
return numbers;
}
async fetchContacts(contacts) {
let phoneNumbers = await this.parseContacts(contacts);
if (phoneNumbers.length) {
this.setState({ isLoadingNumbers: true })
let data = {
"numbers": phoneNumbers,
}
try {
let res = await postFunctionWithAuthToken(`${baseUrl}/contact/check`,
JSON.stringify(data), this.state.authToken);
if (res.response) {
console.log('contacssssst: ', res.contact_list);
this.setState({ contacts: res.contact_list, isLoadingNumbers: false })
} else {
this.setState({ isLoadingNumbers: false })
Alert.alert('Error', `${res.error}! try again.`);
}
} catch (error) {
console.log('error: ', error);
this.setState({ isLoadingNumbers: false })
Alert.alert('Error', 'request failed! try again.')
}
}
}
getContactName(number) {
const { phoneContacts, countryCode } = this.state;
if (phoneContacts.length) {
let index = phoneContacts.findIndex(element => {
let parsedNumber = element.phoneNumbers[0] ? element.phoneNumbers[0].number.replace(/[^a-zA-Z0-9]/g, '') : "";
if (parsedNumber) {
if (parsedNumber.slice(0, 1) === "0") {
if (parsedNumber.slice(1, 2) === "0") {
if (parsedNumber.substring(2) === number ||
parsedNumber.substring(2).replace(`${countryCode}0`, countryCode) === number) {
return number;
}
} else {
return countryCode + parsedNumber.substring(1) === number;
}
} else {
// console.log('nummm: ', parsedNumber, number);
// return parsedNumber === number;
if (parsedNumber === number ||
parsedNumber.replace(`${countryCode}0`, countryCode) === number) {
return number;
}
}
}
});
if (Platform.OS === 'ios') {
return index >= 0 ? phoneContacts[index].givenName : ''
} else {
return index >= 0 ? phoneContacts[index].displayName : ''
}
}
}
下面的代码是我在列表中呈现手机上的姓名和号码的地方。
<View style={styles.container}>
{this.state.contacts.length ?
<FlatList
data={this.state.contacts}
extraData={this.state}
numColumns={1}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
<View style={styles.itemContainer}>
<View>
<Text style={{ color: '#000', fontSize: 20 }}>
{this.getContactName(item.phone_number)}</Text>
<Text style={{ color: '#000' }}>
{item.phone_number}</Text>
</View>
{item.selected ?
<TouchableOpacity onPress={() => this.removeContact(item)}>
<Icon name={"ios-add-circle"} size={26} color={primaryColor} />
</TouchableOpacity>
:
<TouchableOpacity onPress={() => this.selectContact(item)}>
<Icon name={"ios-add-circle"} size={26} color={'grey'} />
</TouchableOpacity>
}
</View>
)}
/>
希望到目前为止我所做的一切都很清楚。无论如何,我现在需要什么。是另一个在渲染之前将名称和数字拉到一起并对其进行排序的功能。至少我是这么认为的。也许排序需要在渲染中完成。我不是100%。两天来我一直在尝试各种方法,但似乎无法让它按字母顺序对联系人列表进行排序。任何和所有的帮助将不胜感激。
解决方案
您需要将姓名放入 phoneNumbers 数组中然后排序...目前您在呈现电话号码时获取联系人的姓名,因此无法预先排序...
if (res.response) {
console.log('contacssssst: ', res.contact_list);
const contacts = res.contact_list.map((contact)=>{
//Loop through the contacts and add the display name found.
contact.displayName = this.getContactName(contact.phone_number);
return contact;
});
//Sort using the displayName property.
contacts.sort((a,b)=>{
if(a.displayName > b.displayName){
return 1;
}
if(a.displayName < b.displayName){
return -1;
}
return 0;
});
this.setState({ contacts: res.contact_list, isLoadingNumbers: false })
}
然后在您的视图中您可以直接访问 item.displayName。
我已经很快编写了排序函数,不太确定它是否会正确排序。
推荐阅读
- android - 如果我们使用不同类型的打印机,代码是否会发生变化?在使用蓝牙打印机(Android Java)打印条码时
- excel - 将一系列值与 Excel 中的单个值进行比较
- reactjs - React/React Native + Typescript 错误:找不到名称'INSERT FUNCTION NAME HERE'
- c++ - clang 与延迟模板解析、std::filesystem 和预编译头文件不兼容?
- sql - 在 where 子句中的情况下
- python-3.x - 使用类方法作为默认 kwarg 参数?
- d3.js - D3 分层:是否有深度限制
- sharepoint - 如何在共享点列表的一列单元格中创建 4 行以单独提及一列单元格中的详细信息
- vb.net - 如何以字节为单位读取注册表值
- java - Java 应用程序无法在控制台窗口中显示结果