Javascript 在React Native中搜索Expo联系人

我将此代码从类组件更改为功能组件。现在搜索功能不起作用了，当我尝试输入文本输入时，文本会自动删除。此外，联系人的电话号码不显示，只显示联系人姓名。我想在联系人列表中显示头像、姓名和电话号码，并能够将联系人详细信息发送到另一个屏幕上

import React, { useState, useCallback, useEffect } from 'react';
import {
    StyleSheet, View, TouchableOpacity,
    TextInput, SafeAreaView, FlatList,
    ActivityIndicator, StatusBar, Text,
    Dimensions
} from 'react-native';
import { custom_colors, constants, buttons, routes } from './../../shared/constants';
import styled from 'styled-components/native';
import * as Contacts from 'expo-contacts';
import { Ionicons } from '@expo/vector-icons';
import firebase from "firebase";
import { useTheme } from '@react-navigation/native';

const { width, height } = Dimensions.get('screen');

export default function PhoneBook({ navigation }) {

    const [info, setInfo] = useState({
        isLoading: false,
        contacts: [],
    })

    const { colors } = useTheme();
    const theme = useTheme();

    const Container = styled.SafeAreaView`
        flex: 1;
        background-color: ${colors.background};
        flex-direction: column;
`;

    const ContactAvatar = styled.Image`
        width: 55px;
        height: 55px;
        border-radius: 50px;
`;

    const FeedItem = styled.TouchableOpacity`
        background-color: ${colors.background};
        border-radius: 2px;
        padding: 4px;
        flex-direction: row;
        border-bottom-color: ${colors.border};
        max-width:100%;
        max-height: 100px;
        justify-content: space-between;
`;

    const user = firebase.auth().currentUser;

    const loadContacts = async () => {
        const { status } = await Contacts.requestPermissionsAsync();
        if (status === 'granted') {
            const { data } = await Contacts.getContactsAsync({
                fields: [Contacts.Fields.PhoneNumbers, Contacts.Fields.Emails],
            });

            if (data.length > 0) {
                const contact = data[0];
                console.log(contact);
            }
            console.log(data);
            setInfo({
                ...info,
                contacts: data,
                inMemoryContacts: data,
                isLoading: false
            });
        }

    };

    useEffect(() => {
        loadContacts();
        setInfo({
            ...info,
            isLoading: true
        });
        user;
        return () => {

        }
    }, [])


    const renderItem = ({ item }) => {
        let items = [];
        if (items.phoneNumbers) {
            items = item.phoneNumbers.map(row => {
                return <Text style={{ color: colors.text, fontWeight: 'bold' }}>{row.number}</Text>
            })
        }
        return (
            <FeedItem onPress={() => {
                navigation.navigate(routes.chat, info.contacts)
            }}
                style={{ borderBottomWidth: StyleSheet.hairlineWidth }}
            >
                <Text style={{
                    padding: 10, fontWeight: 'bold', fontSize: 16, color: colors.text
                }}>
                    {item.name + ' '}
                </Text>
                <Text style={{ color: colors.text, fontWeight: 'bold' }}>
                    {item.phoneNumber}
                </Text>
            </FeedItem>
        )
    };

    // Search function 
    const searchContacts = value => {
        const filteredContacts = info.inMemoryContacts.filter(contact => {
            let contactLowercase = (
                contact.firstName +
                ' ' +
                contact.lastName
            ).toLowerCase();

            let searchTermLowercase = value.toLowerCase();

            return contactLowercase.indexOf(searchTermLowercase) > -1;
        });
        setInfo({ ...info, contacts: filteredContacts });
    };


    return (
        <Container style={{ flex: 1 }}>
            <StatusBar />
            <TextInput
                placeholder="Search"
                placeholderTextColor="#dddddd"
                style={{
                    height: 50,
                    fontSize: 16,
                    padding: 10,
                    borderBottomWidth: 0.5,
                    borderBottomColor: '#7d90a0'
                }}
                onChangeText={value => searchContacts(value)}
            />
            <View style={{ flex: 1 }}>
                {info.isLoading ? (
                    <View
                        style={{
                            ...StyleSheet.absoluteFill,
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}
                    >
                        <ActivityIndicator size="large" color={colors.primary} />
                    </View>
                ) : null}
                <FlatList
                    data={info.contacts}
                    renderItem={renderItem}
                    keyExtractor={(item, index) => index.toString()}
                    ListEmptyComponent={() => (
                        <View
                            style={{
                                flex: 1,
                                alignItems: 'center',
                                justifyContent: 'center',
                                marginTop: 50
                            }}
                        >
                            <Text style={{ color: colors.text }}>No Contacts Found</Text>
                        </View>
                    )}
                />
            </View>
        </Container>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    }
});

import React，{useState，useCallback，useffect}来自“React”；
进口{
样式表、视图、TouchableOpacity、，
文本输入、安全区域视图、平面列表、，
活动指示器、状态栏、文本、，
尺寸
}从“反应本机”；
从“/../../shared/constants”导入{自定义颜色、常量、按钮、路由}；
从“样式化组件/本机”导入样式化；
从“世博会联系人”导入*作为联系人；
从“@expo/vector icons”导入{Ionicons}；
从“firebase”导入firebase；
从'@react navigation/native'导入{useTheme}；
const{width，height}=Dimensions.get（'screen'）；
导出默认函数电话簿（{navigation}）{
const[info，setInfo]=useState({
孤岛加载：false，
联系人：[]，
})
const{colors}=useTheme（）；
const theme=useTheme（）；
const Container=styled.SafeAreaView`
弹性：1；
背景色：${colors.background}；
弯曲方向：立柱；
`;
const ContactAvatar=样式化的图像`
宽度：55px；
高度：55px；
边界半径：50px；
`;
const FeedItem=styled.TouchableOpacity`
背景色：${colors.background}；
边界半径：2px；
填充：4px；
弯曲方向：行；
边框底部颜色：${colors.border}；
最大宽度：100%；
最大高度：100px；
证明内容：之间的空间；
`;
const user=firebase.auth（）.currentUser；
const loadContacts=async（）=>{
const{status}=wait Contacts.requestPermissionsAsync（）；
如果（状态==‘已授予’）{
const{data}=await Contacts.getContactsAsync({
字段：[Contacts.fields.phonenumber，Contacts.fields.email]，
});
如果（data.length>0）{
const contact=数据[0]；
控制台日志（联系人）；
}
控制台日志（数据）；
setInfo({
…信息，
联系人：数据，
在MemoryContacts中：数据，
孤岛加载：false
});
}
};
useffect（（）=>{
loadContacts（）；
setInfo({
…信息，
孤岛加载：正确
});
用户；
return（）=>{
}
}, [])
常量renderItem=（{item}）=>{
设项目=[]；
if（项目、电话号码）{
items=item.PhoneNumber.map（行=>{
返回{row.number}
})
}
返回(
{
导航。导航（routes.chat、info.contacts）
}}
style={{borderBottomWidth:StyleSheet.hairlineWidth}
>
{item.name+'''}
{item.phoneNumber}
)
};
//搜索功能
const searchContacts=value=>{
const filteredContacts=info.inMemoryContacts.filter（联系人=>{
让contactLowercase=(
联系人姓名+
' ' +
contact.lastName
).toLowerCase（）；
让searchTermLowercase=value.toLowerCase（）；
返回contactLowercase.indexOf（searchTermLowercase）>-1；
});
setInfo（{…info，contacts:filteredContacts}）；
};
返回(
搜索联系人（值）}
/>
{info.isLoading(
)：null}
index.toString（）}
ListMPtyComponent={（）=>(
找不到联系人
)}
/>
);
};
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”
}
});