如何在React Native中比较两个数组？ [英] How to compare two array in react native?

问题描述

我正在创建一个React Native应用并将联系人详细信息加载到我的应用中。现在，我想在联系人前面显示一个邀请按钮。我的联系方式以数组形式显示。我还有其他一些联系方式的数组。我想比较这两个数组，只想显示邀请按钮而不是第二个数组。我该怎么做？

I'm creating a react native app and load contact details into my app. Now I wanted to display an Invite button in front of the contact. My contact details in an array. I have another array with some contact details. I wanted to compare those two arrays and wanted to display the invite button only in contact that not in the second array. How can I do this?

< img src = https://i.stack.imgur.com/nPlfc.png alt =示例屏幕>

此是我尝试过的

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
  Alert,
  ScrollView,
  FlatList,
} from 'react-native';
import {CheckBox} from 'react-native-elements';

export default class Test extends Component {

  constructor(props) {
    super(props);
    this.state = {
      calls: [
        {"fullname": "Mark Doe",   "phoneNumber":"0112234567", image:"https://bootdey.com/img/Content/avatar/avatar7.png"},
        {"fullname": "Clark Man",  "phoneNumber":"0723434567", image:"https://bootdey.com/img/Content/avatar/avatar6.png"},
        {"fullname": "Jaden Boor", "phoneNumber":"0778902356", image:"https://bootdey.com/img/Content/avatar/avatar5.png"},
        {"fullname": "Srick Tree", "phoneNumber":"0980234589", image:"https://bootdey.com/img/Content/avatar/avatar4.png"},
        {"fullname": "John Doe",   "phoneNumber":"0112255644", image:"https://bootdey.com/img/Content/avatar/avatar3.png"},
        {"fullname": "Mark Doe",   "phoneNumber":"0723567890", image:"https://bootdey.com/img/Content/avatar/avatar2.png"},
        {"fullname": "John Doe",   "phoneNumber":"0778904321", image:"https://bootdey.com/img/Content/avatar/avatar1.png"},
        {"fullname": "Mark Doe",   "phoneNumber":"0785674334", image:"https://bootdey.com/img/Content/avatar/avatar4.png"},
        {"fullname": "Jaden Boor", "phoneNumber":"0713456980", image:"https://bootdey.com/img/Content/avatar/avatar7.png"},
        {"fullname": "Mark Doe",   "phoneNumber":"0112357654", image:"https://bootdey.com/img/Content/avatar/avatar1.png"},
        ],
        Othercalls: [
          {"fullname": "Mark Doe",   "phoneNumber":"0112234567"},
          {"fullname": "Clark Man",  "phoneNumber":"0723434567"},
          {"fullname": "Jaden Boor", "phoneNumber":"0778902356"},
          {"fullname": "Srick Tree", "phoneNumber":"0980234589"},
          {"fullname": "John Doe",   "phoneNumber":"0112255644"},
          ]
    };
  }

  renderItem = ({item}) => {

    return (
      <TouchableOpacity>
        <View style={styles.row}>
          <Image source={{ uri: item.image }} style={styles.pic} />
          <View>
            <View style={styles.nameContainer}>
              <Text style={styles.txtContactList}>{item.fullname}</Text>
              <Text style={styles.txtPhoneNumber}>{item.phoneNumber}</Text>
            </View>
          </View>
          <TouchableOpacity
          style={[styles.inviteContainer, styles.loginButton]}>
          <Text style={styles.inviteText}>Invite</Text>
        </TouchableOpacity>
        </View>
      </TouchableOpacity>
    );
  }

  render() {
    return(
      <View style={{ flex: 1 }} >
          <Text
          style={{
            fontSize: 26,
            color: '#0080ff',
            textAlign: 'center',
            marginBottom: 30,
            marginTop: 10,
          }}>
          Show Invite Button
        </Text>
        <FlatList 
          extraData={this.state}
          data={this.state.calls}
          keyExtractor = {(item) => {
            return item.id;
          }}
          renderItem={this.renderItem}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    borderColor: '#dcdcdc',
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    padding: 10,
    justifyContent: 'space-between',
  },
  pic: {
    borderRadius: 25,
    width: 50,
    height: 50,
  },
  nameContainer: {
    flexDirection: 'column',
    justifyContent: 'space-between',
    width: 200,
  },
  nameTxt: {
    marginLeft: 15,
    fontWeight: '600',
    color: '#222',
    fontSize: 15,
  },
  txtContactList: {
    fontSize: 18,
    color: 'black',
    marginTop: 5,
    marginLeft: 15,
  },
  txtPhoneNumber: {
    fontSize: 15,
    color: 'black',
    marginTop: 5,
    marginLeft: 15,
  },
  inviteContainer: {
    width: 80,
    height:35,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 10,
    backgroundColor: 'transparent',
  },
  loginButton: {
    backgroundColor: '#0080ff',
    shadowColor: '#808080',
    shadowOffset: {
      width: 0,
      height: 9,
    },
    shadowOpacity: 0.5,
    shadowRadius: 12.35,
    elevation: 19,
  },
  inviteText: {
    color: 'white',
    fontSize: 18,
  },
}); 

我需要比较数组 Calls和 Othercalls，并想在前面显示邀请按钮

I need to compare arrays "Calls" and "Othercalls" and wanted to display invite button in front of the contact those are not in "Othercalls" array.

推荐答案

let tempList = this.state.Othercalls.map(item => item.phoneNumber);

let result = this.state.calls.filter(item => (tempList.includes(item.phoneNumber)))

这篇关于如何在React Native中比较两个数组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！