React Native 中的 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

从导入中删除 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;