如何解决在React Native中,如何使用FlatList自定义警报文本数组
在react native中,如何使用FlatList自定义警报文本数组。
如果单击第一项,我想显示警报标题的“警报优先”。
但是在ALERT_TITLE和道具{id}之间很难同步id。
多次失败后,我需要堆栈溢出。
请回答我的问题。
下面是我的代码和来自https://reactnative.dev/docs/0.60/flatlist的引用
我不确定const数组设置 const ALERT_TITLE = {'警报第一','警报第二','警报第三'}; 要么 const ALERT_TITLE = [{{id:'aa',标题:'Alert First',},{id:'bb',标题:'Alert Second',},{id:'cc',标题:'Alert Third', },];
const ALERT_TITLE = [
{id: 'aa',title: 'Alert First ',},{id: 'bb',title: 'Alert Second ',{id: 'cc',title: 'Alert Third ',];
const ALERT_MESSAGE = [
{id: 'aa',title: 'msg First ',title: 'msg Second ',title: 'msg Third ',];
const DATA = [
{id: 'aa',title: 'First Item',title: 'Second Item',title: 'Third Item',];
function Item({ id,title,selected,onSelect }) {
return (
<TouchableOpacity
onPress={() => Alert.alert(
ALERT_TITLE.toDoSomeThing,//{if first item click I wanna show 'Alert First'}
ALERT_MESSAGE.toDoSomeThing,//{if first item click I wanna show 'msg First'}
[
{ text: 'Cancel'},{ text: 'OK',onPress: () => onSelect(id)}
],{ cancelable: false }
)}
style={[
styles.item,{ backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },]}
>
<Text style={styles.title}>{title}</Text>
</TouchableOpacity>
);
}
export default function App() {
const [selected,setSelected] = React.useState(new Map());
const onSelect = React.useCallback(
id => {
const newSelected = new Map(selected);
newSelected.set(id,!selected.get(id));
setSelected(newSelected);
},[selected],);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={({ item }) => (
<Item
id={item.id}
title={item.title}
selected={!!selected.get(item.id)}
onSelect={onSelect}
/>
)}
keyExtractor={item => item.id}
extraData={selected}
/>
</SafeAreaView>
);
}
解决方法
ALERT_MESSAGE和ALERT_TITLE是数组,因此它们不提供ALERT_TITLE.toDoSomeThing或ALERT_MESSAGE.toDoSomeThing继承者。
要显示所需的文本,您应该在ALERT_TITLE和ALERT_MESSAGE数组上找到所需的项目,并像这样访问它们中的字段
function Item({ id,title,selected,onSelect }) {
return (
<TouchableOpacity
onPress={() => Alert.alert(
ALERT_TITLE.find(el => el.id === id).title,//{if first item click I wanna show 'Alert First'}
ALERT_MESSAGE.find(el => el.id === id).title,//{if first item click I wanna show 'msg First'}
[
{ text: 'Cancel'},{ text: 'OK',onPress: () => onSelect(id)}
],{ cancelable: false }
)}
style={[
styles.item,{ backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },]}
>
<Text style={styles.title}>{title}</Text>
</TouchableOpacity>
);
}
另一种方法(比这快)是将项目的索引传递给Item组件,如下所示:
您的平面列表声明变为:
<FlatList
data={DATA}
renderItem={({ item,index }) => (
<Item
id={item.id}
title={item.title}
selected={!!selected.get(item.id)}
onSelect={onSelect}
index={index}
/>
)}
keyExtractor={item => item.id}
extraData={selected}
/>
和您的Item组件通过道具获取索引
function Item({ id,onSelect,index }) {
return (
<TouchableOpacity
onPress={() => Alert.alert(
ALERT_TITLE[index].title,//{if first item click I wanna show 'Alert First'}
ALERT_MESSAGE[index].title,]}
>
<Text style={styles.title}>{title}</Text>
</TouchableOpacity>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。