if，else-if，else语句中的response native用于更改文本

Question

React原生新手。

我正在尝试更改文本输出，这样，如果一天中的时间是早上，屏幕会显示"早上"，如果一年中的时间在下午5点之前和12点之后，屏幕会表示"下午"，如果时间是下午5点之后，则屏幕会显示"晚上"。

我正在使用var now = new Date().getHours();争取时间。

我如何在react native中使用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;