Question

在文档中使用react-native-contact插件显示如下代码：

var Contacts = require('react-native-contacts')

Contacts.getAll((err, contacts) => {
  if(err === 'denied'){
    // x.x
  } else {
    console.log(contacts)
  }
})

但是如何在我的视图容器中显示contacts结果？

return (
            <Container>contact results here</Container>
        }

Answer 1

看起来联系人插件只返回一个对象数组。（Haven并没有亲自使用它。）

文档还说getAll是一个相当密集的函数并缓存结果。那么如何在构造函数中执行它。将联系人保存到状态并使用地图显示与DisplayContact纯组件的每个联系人。

constructor(props) {
  super(props);

  Contacts.getAll((err, contacts) => {
  if(err === 'denied'){
      // x.x
    } else {
      this.setState({ contacts });
      console.log('contacts set!', contacts);
    }
  })
}

render() {
  const { contacts } = this.state;
  return (
    <Container>
      {contacts.map((contact) => <DisplayContact contact={contact} /> )}
    </Container>
  );
}

DisplayContact：

const DisplayContact = (props) => {
  const { contact } = props;
  return (
    <View>
      <Text> {contact.recordID} </Text>
      <Text> {contact.familyName} </Text>
    </View>
  );
};

Answer 2

您可以将许多地方.getAll放入（直接在渲染中，将其放入自定义方法，帮助程序或服务函数中）。为了加快速度，您可以使用render()方法获取联系人：

render() {
  let contactList = [];
  Contacts.getAll((err, contacts) => {
    if(err === 'denied'){
      // x.x
    } else {
     contactList = contacts;
    }
  )

  // Since contact list is an array of objects
  // https://github.com/rt2zz/react-native-contacts#example-contact-record
  // You can loop throw throw array and render them (I think better to create separate component <Contact>
  return (
    <div>
      {contactList.map((contact, index) =>{
        <span>{contact.givenName}</span>
        <span>{contact.familyName}</span>
      })}
    </div>
  );
}

如果它不起作用，您可能希望用承诺包装Contacts.getAll并在承诺解决时呈现联系。

如何在渲染视图容器中显示联系人列表结果

2 个答案: