React Native RenderItem不能与自定义RenderItem一起工作

Question

我使用React Native文档创建了一个自定义renderItem作为示例，它不工作，但是，当使用一个简单的组件(在脚本中注释)时，它工作得很好。我已经试着改变了一些事情，但就是行不通。

对于flatlist，我基于https://reactnative.dev/docs/flatlist的reactnative示例的代码，使用flat-list-simple示例，在渲染项中调用函数为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',
}
})

Answer 1

尝试添加{项}并添加return

const CardFunction = ({ item }) => {
return (
<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>
);
};