if, else if, else 语句在本机反应中更改文本

Question

在这里反应原生新手。

我正在尝试更改文本输出，以便如果一天中的时间是早上，屏幕会显示“早上”，如果一天中的时间是下午 5 点之前和 12 点之后，屏幕会显示“下午”，如果时间是下午 5 点之后，屏幕会显示“晚上”。

我现在使用var now = new Date().getHours(); 得到时间。

我如何在与 if、else if、else 的本机反应中使用它以更改屏幕上的文本。

    import { StatusBar } from 'expo-status-bar';
    import React from 'react';
    import { StyleSheet, Text, View, Image, Date } from 'react-native';
    
    const Greeting = (props) => {
    var now = new Date().getHours();

    if(now<12){
        return <Text style={styles.h1}>Morning</Text> 
    };
    
    if (now >= 12 && now <= 17) {
       return <Text style={styles.h1}>Afternoon</Text>  
    }; 
      return (
        <Text style={styles.h1}>Evening</Text>
  );
}

const styles = StyleSheet.create({
    h1: {
    color:'black',
    backgroundColor:'#f9f9f9',
  },
});

export default Greeting;

以上是我在尝试各种其他语法后得出的代码。

先感谢您。

Answer 1

我还没有尝试过 react-native，但是您不需要渲染方法来显示任何内容吗？

你有没有试过打印看看会发生什么？

Answer 2

从导入中删除 Date，Date 是 React Native 内置的，您不需要导入它。 为您的消息使用钩子（useState 和 useEffect）并返回一个 Text 组件。

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { StatusBar } from 'expo-status-bar';

const Greeting = (props) => {
  const [message, setMessage] = React.useState('Evening');

  React.useEffect(() => {
    const now = new Date().getHours();

    if (now < 12) {
      setMessage('Morning');
    } else if (now >= 12 && now <= 17) {
      setMessage('Afternoon');
    }
    
  }, []);

  return <Text style={styles.h1}>{message}</Text>;
};

const styles = StyleSheet.create({
  h1: {
    color: 'black',
    backgroundColor: '#f9f9f9',
  },
});

export default Greeting;