在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>

  );
}