探索React Native Contacts: 简化移动端联系人管理的利器

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Contacts } from 'expo';
 
export default class ContactsScreen extends React.Component {
  state = {
    contacts: [],
  };
 
  componentDidMount() {
    this.getContactsAsync();
  }
 
  getContactsAsync = async () => {
    const { status } = await Permissions.askAsync(Permissions.CONTACTS);
    if (status === 'granted') {
      const { data } = await Contacts.getContactsAsync({});
      this.setState({ contacts: data });
    }
  };
 
  render() {
    return (
      <View style={styles.container}>
        {this.state.contacts.map((contact) => (
          <View key={contact.id} style={styles.contact}>
            <Text style={styles.name}>{contact.name}</Text>
            <Text style={styles.email}>{contact.email}</Text>
          </View>
        ))}
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  contact: {
    marginVertical: 5,
    padding: 10,
    backgroundColor: '#f9f9f9',
    borderBottomWidth: 1,
    borderColor: '#eee',
  },
  name: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  email: {
    fontSize: 16,
  },
});

这段代码使用React Native和Expo来展示用户的联系人列表。它首先请求获取联系人的权限，然后异步获取联系人数据，并将其存储在状态中。最后，在渲染方法中，它遍历这些联系人并为每个联系人显示其名字和邮件地址。这个例子展示了如何在移动应用程序中简单而有效地管理联系人信息。