оператор if, else if, else в react native для изменения текста

#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;