#javascript #reactjs #react-native #if-statement #conditional-statements
#javascript #reactjs #react-native #if-statement #условные операторы
Вопрос:
Новичок в React native здесь.
Я пытаюсь изменить вывод текста так, чтобы, если время суток — утро, на экране было написано «Утро», если время суток до 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 amp;amp; 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;
Выше приведен код, к которому я пришел после экспериментов с различными другими синтаксисами.
Заранее благодарю вас.
Комментарии:
1. И в чем проблема?
2. код не работает. Я пытаюсь найти способ изменить текст, который отображается на экране. С этим кодом ничего не получается…………
Ответ №1:
Удалите дату из импорта, дата встроена в React Native, вам не нужно ее импортировать. Используйте перехватчики (useState и useEffect) для вашего сообщения и возвращайте один текстовый компонент.
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 amp;amp; now <= 17) {
setMessage('Afternoon');
}
}, []);
return <Text style={styles.h1}>{message}</Text>;
};
const styles = StyleSheet.create({
h1: {
color: 'black',
backgroundColor: '#f9f9f9',
},
});
export default Greeting;