React Native/TypeScript - 如何在功能组件中管理 state 并使用 FlatList 应用灵活的样式

Question

谁能告诉我如何解决这些问题？
1.如果按下列表，我想将列表米色（#FFF5E7）的背景颜色更改为白色（#FBFBFB）
2.另外，我想用 useState 将 Object 的读取值更改为 true

问题是如果我按下列表，列表的整个背景颜色都会改变。

索引.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
}
]

Answer 1

我们可以将内联 styles 与 static styles 一起添加到组件样式道具中，

例如：

<TouchableOpacity onPress={readState}>
    <View style={[styles.row, { backgroundColor: item.read ? '#FBFBFB' : '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>

Answer 2

您的readState function 和if (state[0].read) {中的问题。 您总是更改索引为 0 的项目，然后检查state[0].read以获取数组的所有元素。