react-native - React Native:如何将弹出模式放入平面列表
问题描述
我制作了一个包含一些数据的平面列表。我想为平面列表中的每个项目制作一个弹出信息。所以我尝试将 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>
)
}
解决方案
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,
},
});
推荐阅读
- reactjs - 如何从 Firebase 存储中获取要显示的 img_url
- css - 为什么使用我的自定义颜色渐变 CSS 类的文本无法在移动设备上正确显示?
- r - R 美元值到数字的转换,逗号、小数、美元符号、数据类型的问题
- python - 如何快速找到一百万个数字的 GCD
- c# - 在 .NET Core 3.1 API 中导入 System.IO.File 时出现问题
- mysql - MySQL如何在过滤整数列时索引在列中搜索子字符串的查询
- azure - 通过 PowerShell 查找 Azure SQL 数据库异地复制辅助服务器
- javascript - 使用 vanilla javascript 删除本地存储项
- java - Spring 的 CachingConnectionFactory。为什么我们需要关闭会话,尽管它们要被缓存?
- javascript - javascript类对象中的点击事件后如何访问元素数据属性