React Native新手求助：如何实现组件在特定时间范围（8点至16点）内显示

嘿，我来帮你搞定这个时间范围显示的问题～你现在的代码只在8点整显示文本，要实现8点到16点（下午4点）期间显示的话，只需要把判断条件改成范围判断就好啦。

修改后的代码示例 #

import { View, Text } from 'react-native';

export default function YourComponent() {
  const currentTime = new Date();
  const currentHour = currentTime.getHours(); // 注意是getHours()，原生Date对象的正确方法是这个哦
  // 判断当前小时是否在8到16之间（包含8点和16点）
  const shouldDisplay = currentHour >= 8 && currentHour <= 16;

  return (
    <View>
      {shouldDisplay && <Text>display</Text>}
    </View>
  );
}

关键说明 #

• 首先要修正一个小错误：原生JavaScript的Date对象获取小时的方法是getHours()（不是你写的getHour()，这个方法不存在），它会返回0-23之间的数字。
• 用逻辑与运算符&&来判断当前小时是否同时满足大于等于8和小于等于16，这样就能覆盖8点整到16点整的所有时间。
• React Native的条件渲染逻辑很直观：当shouldDisplay为true时，后面的<Text>组件才会被渲染；为false时则不会显示。

如果你的需求是8点整到16点整之前（不包含16点），只需要把条件改成currentHour >=8 && currentHour <16就可以啦。

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