如何切换我的 flatList 中的文本项？

Question

我想切换 flatList 中的文本项，这里是 what I have so far。问题是我不知道如何关闭之前的选择。 我如何修改我的 expo 零食示例来做到这一点？ 明确地说，我希望一次选择一个项目，而不是多个项目，目前它是多。重要的是，我的 FlatListItem 与 FlatList 容器保持分离（在它自己的组件中）。在我的实际项目中，这是设置，因为我的 FlatListItem 包含许多 if 语句和样式。所以为了保持整洁，我将两者分开，以防你想知道为什么两者是分开的。

import * as React from 'react';
import { FlatList, Text, View, StyleSheet, Pressable } from 'react-native';
import FlatListItem from './components/FlatListItem'



export default function App() {
  
const renderItem = ({item}) => <FlatListItem text={item.text} />
    
const data = [
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 0
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 1
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 2
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 3
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 4
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 5
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 6
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 7
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 8
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 9
  },
]

  return (
    <View style={styles.container}>
      <FlatList
      horizontal={false}
      data={data}
      renderItem={renderItem}
      contentContainerStyle={{ marginHorizontal: 10 }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
 
});

import * as React from 'react';
import {View, Text, Pressable} from 'react-native';

const flatListItem = (props) => {
const [selectText, setSelectText] = React.useState(false)

const selectionStyle = (isTextSelected) => {
      if (isTextSelected) {
        return { backgroundColor: "red", marginVertical: 10 };
      } else {
        return { marginVertical: 10};
      }
    };

return <Pressable onPress={() => selectText ? setSelectText(false) : setSelectText(true)} >
<Text style={selectionStyle(selectText)}>{props.text}</Text>
</Pressable>
}

export default flatListItem

Answer 1

由于您想要一个选择，因此您需要管理父级别的状态，即平面列表呈现的位置，因为我们不能依赖平面列表项状态进行选择。我稍微更新了你的代码，这应该可以工作

import * as React from 'react';
import { FlatList, Text, View, StyleSheet, Pressable } from 'react-native';
import FlatListItem from './components/FlatListItem'



export default function App() {
  const [selectedIndex, setSelectedIndex] = React.useState(null);//keep track of selection
  const renderItem = ({ item }) => <FlatListItem selected={selectedIndex === index.key} onSelect={onSelectItem} text={item.text} id={item.key} />
/* We will toggle the selection here */
  const onSelectItem = id => {
    if (id === selectedIndex) return setSelectedIndex(null)
    setSelectedIndex(id)
  }
  const data = [
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 0
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 1
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 2
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 3
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 4
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 5
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 6
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 7
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 8
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 9
    },
  ]

  return (
    <View style={styles.container}>
      <FlatList
        horizontal={false}
        data={data}
        renderItem={renderItem}
        contentContainerStyle={{ marginHorizontal: 10 }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },

});

import * as React from 'react';
import { View, Text, Pressable } from 'react-native';

const flatListItem = (props) => {

  const selectionStyle = (isTextSelected) => {
    if (isTextSelected) {
      return { backgroundColor: "red", marginVertical: 10 };
    } else {
      return { marginVertical: 10 };
    }
  };

  return <Pressable onPress={() => props.onSelect(props.id)} >
    <Text style={selectionStyle(props.selected)}>{props.text}</Text>
  </Pressable>
}

export default flatListItem