添加身份验证后在其他选项卡屏幕上显示主页标题。(遵循React导航文档)

import React, { useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AsyncStorage from '@react-native-async-storage/async-storage';

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => {
  const [title, setTitle] = useState('Home');

  useEffect(() => {
    const checkAuth = async () => {
      try {
        const token = await AsyncStorage.getItem('userToken');
        if (token) {
          setTitle('Welcome Back!');
        } else {
          navigation.navigate('Login');
        }
      } catch (error) {
        console.error(error);
      }
    };

    checkAuth();
  }, []);

  return (
    <View>
      <Text>{title}</Text>
    </View>
  );
};

const LoginScreen = ({ navigation }) => {
  const login = async () => {
    // 模拟登录过程
    await AsyncStorage.setItem('userToken', 'fakeToken');
    navigation.navigate('Home');
  };

  return (
    <View>
      <Button title="Login" onPress={login} />
    </View>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Login" component={LoginScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;