react-native - 推送联系人列表并渲染一个包含联系人姓名和号码的组件

Question

我正在尝试向我的呼叫应用程序呈现联系人列表，但遇到了一些问题（'找不到变量：人'）。该组件将仅呈现联系人全名和联系人电话号码。

这是我的代码：

import {View, Text} from "react-native";
import Contacts from 'react-native-contacts';

class ContactScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ContactsList: ''
    };
  }

  componentDidMount(){
    Contacts.getAll((ContactsList) => {this.setState({ContactsList})})
  }

  render() {
    return (
      <View style={{justifyContent: 'center'}}>
        this.state.ContactsList.map((person) => 
          <Text>person.givenName + person.familyName</Text>
          <Text>person.phoneNumbers[0].number</Text>
          )
      </View>
    )
  }
}

标签： react-native

Answer 1

Just fixing some syntax below.

import {View, Text} from "react-native";
import Contacts from 'react-native-contacts';

class ContactScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ContactsList: ''
    };
  }

  componentDidMount(){
    Contacts.getAll((ContactsList) => {this.setState({ContactsList})})
  }

  render() {
    const { ContactsList } = this.state
    let contacts = []
    if (ContactsList) {
      ContactsList.map((person, i) => {
        contacts.push(
          <View key={i}>
            <Text>{person.givenName + person.familyName}</Text>
            <Text>{person.phoneNumbers[0].number}</Text>
          <View>
        )
      }
    }
    return (
      <View style={{justifyContent: 'center'}}>
        {contacts}
      </View>
    )
  }
}