Question

这是我的代码：

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



export default class ContactTab extends React.Component {

    componentDidMount() {

        console.log("Hello", Contacts)

        Contacts.getAll((err, contacts) => {
            console.log("dude")
        })



    }

    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Settings!</Text>
            </View>
        )
    }
}

它在模拟器上工作正常但在手机上崩溃。

崩溃报告只说

I/ReactNativeJS(19364): 'Hello', { addContact: { [Function: fn] type: 'async' }, I/ReactNativeJS(19364): checkPermission: { [Function: fn] type: 'async' }, I/ReactNativeJS(19364): getAll: { [Function: fn] type: 'async' }, I/ReactNativeJS(19364): getAllWithoutPhotos: { [Function: fn] type: 'async' }, I/ReactNativeJS(19364): getContactsMatchingString: { [Function: fn] type: 'async' }, I/ReactNativeJS(19364): getPhotoForId: { [Function: fn] type: 'async' }, I/ReactNativeJS(19364): openContactForm: { [Function: fn] type: 'async' }, I/ReactNativeJS(19364): requestPermission: { [Function: fn] type: 'async' }, I/ReactNativeJS(19364): updateContact: { [Function: fn] type: 'async' } } D/ReactNative(19364): ReactInstanceManager.detachViewFromInstance()

由于Contacts.getAll函数被称为app crashed。

可能是什么问题？我检查了许可，然后返回“授权”。

对此有任何解决方案吗？

Answer 1

    enter code here
    enter code here
import React from 'react';
import {
  SafeAreaView,
  View,
  Text,
  PermissionsAndroid,
  SectionList,
} from 'react-native';

import Contacts from 'react-native-contacts';
class App extends React.Component {
  state = {
    contactList: [],
  };

  componentDidMount() {
    this.getContact();
  }
  getContact() {
    PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_CONTACTS, {
      title: 'Contacts',
      message: 'This app would like to view your contacts.',
    }).then(() => {
      Contacts.getAll((err, contacts) => {
        if (err === 'denied') {
          // error
        } else {
          console.log(contacts);
          this.setState({contactList: contacts});
        }
      });
    });
  }
  render() {
    var uniques = [];
    this.state.contactList.forEach(item => {
      uniques.push(item.displayName[0]);
    });
    var data = {title: 'data', data: []};
    const dataUniques = uniques.filter(
      (item, index) => uniques.indexOf(item) === index,
    );
    dataUniques.sort();
    var sortedData = [];

    dataUniques.forEach(key => {
      var dataList = [];
      this.state.contactList.forEach(item => {
        if (item.displayName[0] == key) {
          dataList.push(item);
        }
      });
      var objectKeyBased = {title: key, data: dataList};
      sortedData.push(objectKeyBased);
    });
    console.log('sorted data is..', sortedData);

    return (
      <SafeAreaView>
        <View>
          <View
            style={{
              height: 50,
              elevation: 10,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: 'grey',
            }}>
            <Text style={{color: 'white', fontWeight: 'bold'}}>
              Contact List
            </Text>
          </View>
          <View>
            {this.state.contactList ? (
              <SectionList
                sections={sortedData}
                renderItem={({item}) => {
                  return (
                    <View
                      style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        margin: 5,
                      }}>
                      <View
                        style={{
                          height: 40,
                          width: 40,
                          borderRadius: 20,
                          backgroundColor: 'grey',
                          margin: 10,
                        }}></View>
                      <Text>{item.displayName}</Text>
                    </View>
                  );
                }}
                renderSectionHeader={({section}) => (
                  <View
                    style={{margin: 5, borderTopWidth: 1, borderColor: 'grey'}}>
                    <Text style={{margin: 10, fontWeight: 'bold'}}>
                      {section.title}
                    </Text>
                  </View>
                )}
                keyExtractor={(item, index) => index}
              />
            ) : null}
          </View>
        </View>
      </SafeAreaView>
    );
  }
}

export default App;

仅在移动设备上的Contacts.getAll上反应原生联系人应用程序崩溃

1 个答案: