Длинный список React native очень медленный ( при использовании пакета контактов)

#react-native #scrollview #contacts #react-native-contacts

Вопрос:

Я получаю данные о контактах с телефона пользователя, затем сопоставляю и создаю сортированные и более минимальные данные(имя,телефон,идентификатор записи) В моем случае у меня на телефоне 475 контактов. Выбор и перечисление этих контактов происходит очень медленно

пакет

 import Contacts from 'react-native-contacts';

  constructor(props) {
    super(props);
    this.state = {
 
      loaded: false,
      searchText: '',

      contacts: [],
      contactsTemp: [],
    };
    Contacts.iosEnableNotesUsage(false);
  }
  componentDidMount() {
    this.getContacts();
  }
 

Функция getContacts () (andorid ios отличается)

 getContacts() {
    if (Platform.OS == 'android') {
      PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_CONTACTS, {
        title: 'Contacts',
        message: 'This app would like to view your contacts.',
        buttonPositive: 'Please accept bare mortal',
      }).then(
        Contacts.getAllWithoutPhotos().then(contacts => {
          var contactss = [];
          contacts.map(contact => {
            contactss.push({
              nameSurname: contact.displayName,
              recordID: contact.recordID,
              phone: contact.phoneNumbers[0],
              isChecked: false,
            });
          });
          contactss.sort(function (a, b) {
            if (a.nameSurname.toLowerCase() < b.nameSurname.toLowerCase())
              return -1;
            if (a.nameSurname.toLowerCase() > b.nameSurname.toLowerCase())
              return 1;
            return 0;
          });

          this.setState(
            {contacts: contactss, contactsTemp: contactss, loaded: true},
            () => {
              console.log('Contatst', contacts);
            },
          );
        }),
      );
    } else {
      Contacts.getAllWithoutPhotos().then(contacts => {
        console.log('IOS  ', contacts);
        var contactss = [];
        contacts.map(contact => {
          contactss.push({
            nameSurname: contact.givenName,
            recordID: contact.recordID,
            phone: contact.phoneNumbers[0],
            isChecked: false,
          });
        });
        contactss.sort(function (a, b) {
          if (a.nameSurname.toLowerCase() < b.nameSurname.toLowerCase())
            return -1;
          if (a.nameSurname.toLowerCase() > b.nameSurname.toLowerCase())
            return 1;
          return 0;
        });

        this.setState(
          {contacts: contactss, contactsTemp: contactss, loaded: true},
          () => {
            console.log('Contatst');
          },
        );
      });
    }     
  }
 

Оказывать

 <KeyboardAwareScrollView showsVerticalScrollIndicator={false}>
  <Box flex={1} mt={20}>
    <Box ml={10} mb={5}>
      <Text>Total: {this.state.contacts?.length} </Text>
    </Box>

    {this.state.contactsTemp?.map((cont, index) => {
      return (
        <TouchableOpacity
          onPress={() => {
            this.checkContact(cont);
          }}
        >
          <FriendsComponent
            isChecked={cont.isChecked}
            nameSurname={cont.nameSurname}
            key={index}
          />
        </TouchableOpacity>
      );
    })}
  </Box>
</KeyboardAwareScrollView>;
 

И результат

введите описание изображения здесь Это может случиться с неиспользуемым плоским списком. Мне действительно нужна помощь, чтобы сделать это быстрее.Я могу объяснить все детали, просто спросите. Спасибо.

Комментарии:

1. Чтение всех контактов из базы данных в iOS в целом происходит медленно, но использовать представление прокрутки вместо плоского списка также плохая идея, поскольку оно должно отображать все строки сразу, в то время как плоский список отображает только видимые строки ( несколько) и перерабатывает их.

2. Изменение вида прокрутки на плоский список будет более эффективным ?

3. да, в зависимости от количества контактов