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) => {&nbsp; const [message, setMessage] = React.useState('Evening');&nbsp; React.useEffect(() => {&nbsp; &nbsp; const now = new Date().getHours();&nbsp; &nbsp; if (now < 12) {&nbsp; &nbsp; &nbsp; setMessage('Morning');&nbsp; &nbsp; } else if (now >= 12 && now <= 17) {&nbsp; &nbsp; &nbsp; setMessage('Afternoon');&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; }, []);&nbsp; return <Text style={styles.h1}>{message}</Text>;};const styles = StyleSheet.create({&nbsp; h1: {&nbsp; &nbsp; color: 'black',&nbsp; &nbsp; backgroundColor: '#f9f9f9',&nbsp; },});export default Greeting;