自定义 Header 标题反应原生

Question

I wanna make custom header title in react native that render a greeting text, this is the logic code of the greeting text

 greeting = () => { const date = new Date(); let hours = date.getHours(); let status = hours < 12? "Selamat Pagi": hours <= 18 && hours >= 12? "Selamat Siang": "Selamat Malam"; return status; };

Answer 1

sry, this is the answer i think

 import React, { useEffect, useState } from "react"; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; const Stack = createNativeStackNavigator(); function HomeScreen() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor:'white'}}> <Text>Home Screen</Text> </View> ); } function App() { const [greet, setGreet] = useState('') const findGreet = () => { const hrs = new Date().getHours() if (hrs == 0 || hrs < 12) return setGreet('Pagi') if (hrs == 1 || hrs < 17) return setGreet('Siang') setGreet('Malam') } useEffect(() => { findGreet() }, []) return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} options={{ headerTitle: `Selamat ${greet}`, headerStyle: { backgroundColor: 'transparent', elevation: 0, shadowOpacity: 0, }, }} /> </Stack.Navigator> </NavigationContainer> ); } export default App;