如何结合“react-native-contacts”和“react-native-communications”？

Question

我想将“ React-Native-Contacts ”库（github.com/morenoh149/react-native-contacts）和“ React-Native-Communications ”直接结合到 select 并呼叫我已经在我的手机目录中注册的联系人. 问题是我不知道如何通过修改“ React-Native-Contacts ”库中“App.js”代码的“OnPress”道具来做到这一点，即“ onPress={() => Contacts.openExistingContact (contact, () => { })} “通过将组件“ Communications ”的调用分配给“ Communications.phonecall('0123456789', true) ”。 因此，目标是通过从我的手机目录中选择的联系人修改电话号码“ 0123456789 ”。

这是我访问手机联系人并基于“react-native-contacts”的完整代码：

import React, { Component } from "react";
import {
  PermissionsAndroid,
  Platform,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View,
  Image
} from "react-native";
import Contacts from "react-native-contacts";

type Props = {};
export default class App extends Component<Props> {
  constructor(props) {
    super(props);

    this.search = this.search.bind(this);

    this.state = {
      contacts: [],
      searchPlaceholder: "Search"
    };

    Contacts.iosEnableNotesUsage(true);
  }

  async componentDidMount() {
    if (Platform.OS === "android") {
      PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_CONTACTS, {
        title: "Contacts",
        message: "This app would like to view your contacts."
      }).then(() => {
        this.loadContacts();
      });
    } else {
      this.loadContacts();
    }
  }

  loadContacts() {
    Contacts.getAll((err, contacts) => {
      if (err === "denied") {
        console.warn("Permission to access contacts was denied");
      } else {
        this.setState({ contacts });
      }
    });

    Contacts.getCount(count => {
      this.setState({ searchPlaceholder: `Search ${count} contacts` });
    });
  }

  search(text) {
    const phoneNumberRegex = /\b[\+]?[(]?[0-9]{2,6}[)]?[-\s\.]?[-\s\/\.0-9]{3,15}\b/m;
    const emailAddressRegex = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
    if (text === "" || text === null) {
      this.loadContacts();
    } else if (phoneNumberRegex.test(text)) {
      Contacts.getContactsByPhoneNumber(text, (err, contacts) => {
        this.setState({ contacts });
      });
    } else if (emailAddressRegex.test(text)) {
      Contacts.getContactsByEmailAddress(text, (err, contacts) => {
        this.setState({ contacts });
      });
    } else {
      Contacts.getContactsMatchingString(text, (err, contacts) => {
        this.setState({ contacts });
      });
    }
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View
          style={{
            paddingLeft: 100,
            paddingRight: 100,
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <Image
            source={require("./logo.png")}
            style={{
              aspectRatio: 6,
              resizeMode: "contain"
            }}
          />
        </View>
        <SearchBar
          searchPlaceholder={this.state.searchPlaceholder}
          onChangeText={this.search}
        />
        <ScrollView style={{ flex: 1 }}>
          {this.state.contacts.map(contact => {
            return (
              <ListItem
                leftElement={
                  <Avatar
                    img={
                      contact.hasThumbnail
                        ? { uri: contact.thumbnailPath }
                        : undefined
                    }
                    placeholder={getAvatarInitials(
                      `${contact.givenName} ${contact.familyName}`
                    )}
                    width={40}
                    height={40}
                  />
                }
                key={contact.recordID}
                title={`${contact.givenName} ${contact.familyName}`}
                description={`${contact.company}`}
                onPress={() => Contacts.openExistingContact(contact, () => { })}
                onDelete={() =>
                  Contacts.deleteContact(contact, () => {
                    this.loadContacts();
                  })
                }
              />
            );
          })}
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

const getAvatarInitials = textString => {
  if (!textString) return "";

  const text = textString.trim();

  const textSplit = text.split(" ");

  if (textSplit.length <= 1) return text.charAt(0);

  const initials =
    textSplit[0].charAt(0) + textSplit[textSplit.length - 1].charAt(0);

  return initials;
};

通过成功结合两个库“ React-Native-Contacts ”（github.com/morenoh149/react-native-contacts）和“ React-Native-Communications ”帮助我解决这个难题，因为本教程解释了如何使用“ React- Native-Communications ”（aboutreact.com/make-phone-call-send-sms-or-email-using-react-native-communication/）没有详细说明如何使用我们手机的联系人。

请帮助我将“ React-Native-Communications ”电话呼叫 function添加到我上面的“ React-Native-Contacts ”代码中。

Answer 1

暗示您的联系人只存储了一个号码，或者如果有多个：您想拨打第一个号码，您可以简单地使用：

onPress={() => Communications.phonecall(contact.phoneNumbers[0].number, true)}

如果一个联系人存储了超过 1 个号码（例如工作/家庭/手机/...），您必须实现一些逻辑，以便您可以选择哪一个。 显示列出所有数字的提示，例如