React Native中如何在事件处于手机当前时段时加粗显示标题？

以下是针对你的需求的优化实现方案，核心是通过实时比较当前时间与事件的起止时间，动态为标题应用加粗样式：

修正后的完整代码 #

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';

interface ConferenceSession {
  id: string;
  title: string;
  startTime: string;
  endTime: string;
  room: string;
  speaker: string;
}

const ConferenceProgram: React.FC = () => {
  const [conferenceData, setConferenceData] = useState<ConferenceSession[]>([]);
  const [currentDateTime, setCurrentDateTime] = useState(new Date());

  useEffect(() => {
    fetch('https://dev.monstercode.pl/program.json')
      .then(response => response.json())
      .then(data => setConferenceData(data))
      .catch(error => console.error(error));
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentDateTime(new Date());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  const renderItem = ({ item }: { item: ConferenceSession }) => {
    // 直接在渲染时判断当前事件是否处于时间范围内
    const now = new Date();
    const sessionStartTime = new Date(`${item.startTime}Z`);
    const sessionEndTime = new Date(`${item.endTime}Z`);
    const isCurrentSession = now >= sessionStartTime && now <= sessionEndTime;

    return (
      <View
        style={{
          backgroundColor: isCurrentSession ? 'red' : 'white',
          padding: 10,
          marginBottom: 10,
          borderWidth: 1,
          borderColor: '#eee'
        }}
      >
        <Text style={{ 
          fontWeight: isCurrentSession ? 'bold' : 'normal', 
          color: isCurrentSession ? 'red' : '#333',
          fontSize: 16
        }}>{item.title}</Text>
        <Text style={{ marginTop: 4, color: '#666' }}>
          {new Date(item.startTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - 
          {new Date(item.endTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
        </Text>
        <Text style={{ marginTop: 4, color: '#666' }}>{item.room}</Text>
        <Text style={{ marginTop: 4, color: '#666' }}>Prelegent: {item.speaker}</Text>
      </View>
    );
  };

  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 16 }}>Program konferencji</Text>
      <Text style={{ marginBottom: 12, color: '#666' }}>Aktualna data i czas: {currentDateTime.toLocaleString()}</Text>
      <FlatList
        data={conferenceData}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  );
};

export default ConferenceProgram;

关键改进与说明 #

1. 简化状态管理
   移除了冗余的currentSessionId状态，直接在renderItem中计算当前事件是否处于活跃时间范围，避免状态同步问题，代码更简洁。

2. 时间范围判断逻辑
   通过new Date()获取实时当前时间，将事件的startTime和endTime转换为UTC时间对象（添加Z后缀），然后通过now >= sessionStartTime && now <= sessionEndTime判断是否在范围内。

3. 动态样式应用
   根据isCurrentSession变量，为标题设置fontWeight: 'bold'或normal，同时修复了原代码中color属性的语法错误，补充了默认颜色值。

4. 时间格式化优化
   使用toLocaleTimeString替代substr提取时间，适配不同的时间格式，避免字符串截取可能出现的错误。

注意事项 #

• 如果事件时间是本地时区而非UTC，需移除时间字符串后的Z后缀，防止时区转换错误。
• 可调整定时器间隔（比如改为30秒），减少不必要的重渲染，提升应用性能。
• 若数据量较大，可使用useMemo缓存时间判断结果，优化渲染效率。

内容的提问来源于stack exchange，提问作者monstercode