我想在本机反应中显示选定的数字

Question

I have created a list of numbers and i want to show selected items in a different view but my codes show only the pressed item. i want it to like 1 2 3.. of the numbers in the view if onPress is fired

import React,{useState} from "react";
import { FlatList, ScrollView, SafeAreaView, View, StyleSheet, Text, TouchableOpacity } from "react-native";

here is what display the list of numbers

const Item = ({ item, onPress, onLongPress, backgroundColor, textColor }) => {
  return (
    <TouchableOpacity  onPress={onPress}
      style={[styles.item, backgroundColor]}>
      <Text style={[styles.title, textColor]}>{item.NO}</Text>
    </TouchableOpacity>
  );
}

FLATLIST COMPONENT shows the render items

export const FlatListComponent = (item,textColor) => {
  const navigation = useNavigation();
 
  const [numbers, setNumbers] = useState([
    { id: 1, NO: '1' }, { id: 2, NO: '2' }, { id: 3, NO: '3' }, { id: 4, NO: '4' }, { id: 5, NO: '5' },
    { id: 6, NO: '6' }, { id: 7, NO: '7' }, { id: 8, NO: '8' }, { id: 9, NO: '9' }, { id: 10, NO: '10' },
    { id: 11, NO: '11' }, { id: 12, NO: '12' }, { id: 13, NO: '13' }, { id: 14, NO: '14' }, { id: 15, NO: '15' },
    { id: 16, NO: '16' }, { id: 17, NO: '17' }, { id: 18, NO: '18' }, { id: 19, NO: '19' }, { id: 20, NO: '20' },
  ]);

  const [selectedItems, setSelectedItems] = useState([]);  

  const RenderItem = ({ item }) => {
    const backgroundColor = item.NO === selectedItems? "#6e3b6e" : "#f9c2ff";
    const color = item.NO === selectedItems ? 'white' : 'black';

    return (
      <Item
        item={item}
        backgroundColor={{ backgroundColor }}
        textColor={{ color }}
        onPress={() => setSelectedItems(item.NO)}
      />
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentContainerStyle={{ flexDirection: "row", flexWrap: "wrap" }}>
        {numbers.map((item, index) => {
          return (
            <View style={{ width: '20%', flexDirection: "row" }}>
              <RenderItem
                keyExtractor={item.id}
                item={item}
                extraData={selectedItems}
              />
            </View>
          )
        }
        )}
        <View >

          <Text>{selectedItems}</Text></View>
      </ScrollView>
    </SafeAreaView>
  );
};

Answer 1

const [selectedList , setSelectedList] = useState([])

push the selected item in selectedList Array =>

         if (!selectedList?.includes(item.id)){

                selectedList.push(item.no);

                setSelectedList(selectedList)

            }

and view the selectedList.