我制作了一个包含一些数据的平面列表。我想为 flatlist 中的每个项目制作一个弹出信息。所以我尝试将 Modal 放入 renderItem 函数中,但是当它设置模态状态可见时,它将显示我的平面列表中的所有信息。我认为它应该通过 id 或类似的东西设置模态可见状态,但我不知道该怎么做。有什么建议吗?
我的渲染项:
function RenderItem({ item }) {
return (
<View>
<Modal
animationType='slide'
transparent={true}
visible={infoModal}>
<View style={styles.informationContainer}>
<View style={styles.informationBox}>
<Text>{item.file.displayName}</Text>
<Button title=' OK ' onPress={() => setInfoModal(false)} />
</View>
</View>
</Modal>
<TouchableOpacity style={styles.listBox} onPress={() => setInfoModal(true)}>
<View>
<Text numberOfLines={1} style={styles.listText}>{item.file.displayName}</Text>
<Text style={{ width: 200, color: 'rgba(0, 0, 0, 0.5)' }}>{item.certificateName}</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<TouchableOpacity>
<Icon name='search' color='black' size={25} />
</TouchableOpacity>
<Text> </Text>
<TouchableOpacity onPress={() => handleDownload(item)}>
<Icon name='download' color='black' size={25} />
</TouchableOpacity>
<Text> </Text>
</View>
</TouchableOpacity>
</View>
)
}
答案 0 :(得分:0)
不是设置一个关于是否应该出现 Modal
的简单布尔值,您可以设置某种可识别的值,告诉它要加载什么项目(否则保留 undefined
)。>
基本示例:
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
export default function App() {
const [modalInfo, setModalInfo] = React.useState(undefined);
const renderItem = ({ item }) => (
<TouchableOpacity onPress={() => setModalInfo(item.title)}><Text>{item.title}</Text></TouchableOpacity>
);
return (
<View style={styles.container}>
<Modal visible={modalInfo !== undefined}>
<View style={[{borderWidth: 1},styles.centeredView]}>
<Text>{modalInfo}</Text>
<TouchableOpacity onPress={() => setModalInfo(undefined)}><Text>Close</Text></TouchableOpacity>
</View>
</Modal>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
);
}
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22
},
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});