我使用React Native文档作为例子创建了一个自定义renderItem，但它不工作，然而，当使用一个简单的组件（在脚本中注解）时，它工作得很好。我尝试改变一些东西，但我不能让它工作。
对于平面列表，我的代码基于react native示例 * https://reactnative.dev/docs/flatlist *，使用平面列表简单示例，以renderItem={Function}的形式调用呈现项中的函数，但react native无法识别它，我希望获得任何关于我可以更改什么的指导，或者如果我做错了，谢谢！

import { StyleSheet, Text, View, TouchableOpacity, FlatList } from 'react-native'
import React from 'react'
import Ionicons from 'react-native-vector-icons/Ionicons';
import VisitasHeader from './VisitasHeader';

const VisitasCard = ({visitas,titulo}) => {
// renderItem for FlatList
const CardFunction = (item) => {
    <View style={{marginBottom:10}}>
        <View style={styles.card_top}>
            <View style={styles.holder}>
                <View style={styles.icon}>
                    <Ionicons
                        name='ios-people-circle-sharp'
                        color='white'
                        size={48}
                    />
                </View>
                <View style={styles.visitante}>
                    <Text style={styles.text_nombre}>{item.nombre} </Text>
                    <Text style={styles.text_cedula}>e-0000001</Text>
                    <View>
                        <Text style={styles.text_fecha}>2 de enero de 2022</Text>
                    </View>
                </View>
            </View>
        </View>
        <View style={styles.card_bottom}>
            <TouchableOpacity style={styles.button_accept}>
                <Text style={styles.button_text}>Aceptar</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button_reject}>
                <Text style={styles.button_text}>Rechazar</Text>
            </TouchableOpacity>
        </View>            
    </View>
}


return (
    <FlatList
        ListHeaderComponent={<VisitasHeader title={titulo} />}
        data={visitas}
        keyExtractor={item => item.id}
        renderItem={CardFunction}
        // renderItem={({item}) => <View><Text>{item.nombre}</Text></View>} WORKS PERFECT WHEN USING THIS
        ListEmptyComponent={<Text style={{textAlign:'center',paddingTop:10}}>No tiene visitas por aprobar.</Text>}
    />
  )
}

export default VisitasCard

const styles = StyleSheet.create({
    button_accept:{
        backgroundColor:'green',
        // margin:12,
        padding:10,
        borderRadius:12,
    },
    button_text:{
        color:'white',
        fontWeight:'bold',
    },
    button_reject:{
        backgroundColor:'red',
        // margin:12,
        padding:10,
        borderRadius:12,
    },
    card_bottom:{
        height:50,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
        borderWidth:1,
        borderColor:'#3959ea',
        borderBottomLeftRadius:8,
        borderBottomRightRadius:8,
        justifyContent:'space-evenly'
    },
    card_top:{
        height:100,
        backgroundColor:'#3959ea',
        borderTopLeftRadius:8,
        borderTopRightRadius:8,
        alignItems:'center',
        justifyContent:'center',
    },
    holder:{
        flexDirection:'row',
    },
    icon:{
        padding:10,
        alignItems:'center',
        margin:12,
    },
    text_cedula:{
        color:'white',
        fontSize:18,
        textTransform:'uppercase',
        fontWeight:'600',
    },
    text_nombre:{
        color:'white',
        fontSize:24,
        textTransform:'capitalize',
        fontWeight:'800',
        // ellipsizeMode:'head',
        // numberOfLines:1,
    },
    text_fecha:{
        color:'white'
    },
    visitante:{
        flex:2,
        justifyContent:'center',
        alignItems:'flex-start',
    }
})