Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Can anyone tell me how to solve these things?
1.if the list is pressed, I'd like to change the background color of the list beige(#FFF5E7) to white(#FBFBFB)
2.Also, I'd like to change the read value of the Object fales to true with useState

Problem is that if I pressed the list, whole background color of the list will be changed.

index.tsx
import React, { useState } from 'react';
import { Text, View, TouchableOpacity, FlatList } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { DETAIL } from '../../sample';
import { Object } from './sample';

export default function sample() {
  const [state, setState] = useState(Object);
  const navigation = useNavigation();
  let Element;

  const renderItem = ({ item }) => {
    const readState = () => {
      navigation.navigate(NOTICE_DETAIL);
      const readValue = [...state];
      let value = { ...readValue[0] };
      value.read = true;
      readValue[0] = value;
      setState(readValue);
    };
    if (state[0].read) {
      Element = (
        <TouchableOpacity onPress={readState}>
          <View style={[styles.row, { backgroundColor: '#FBFBFB' }]}>
            <View style={styles.container}>
              <View style={styles.end}>
                <Text style={styles.text}>{item.text}</Text>
                <Text style={styles.time}>{item.time}</Text>
              </View>
              <Text style={styles.content}>{item.content}</Text>
            </View>
          </View>
        </TouchableOpacity>
      );
    } else {
      Element = (
        <TouchableOpacity onPress={readState}>
          <View style={[styles.row, { backgroundColor: '#FFF5E7' }]}>
            <View style={styles.container}>
              <View style={styles.end}>
                <Text style={styles.text}>{item.text}</Text>
                <Text style={styles.time}>{item.time}</Text>
              </View>
              <Text style={styles.content}>{item.content}</Text>
            </View>
          </View>
        </TouchableOpacity>
      );
    }
    return Element;
  };
  }

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        extraData={Object}
        data={Object}
        renderItem={renderItem}
      />
    </View>
  );

}


Object.ts
export const Object = [
 {
  id: 1,
  text: 'testtesttest',
  content: 'testtesttest'
  read: false
},
{ 
  id: 2,
  text: 'testtesttest',
  content: 'testtesttest'
  read: false
}
  id: 3,
  text: 'testtesttest',
  content: 'testtesttest'
  read: false
}
]


What I have tried:

I could put the object data in the state and change the read value but I don't know how to manage state and change backgroundcolor of the list individually.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900