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

基础概念

在React应用中，身份验证通常涉及用户登录状态的维护和验证。React Navigation是React Native应用中常用的导航库，用于管理应用的页面跳转和状态。

类型

基于Token的身份验证：使用JWT（JSON Web Token）或其他形式的Token来验证用户身份。
基于Session的身份验证：服务器端维护用户会话状态。

应用场景

在多标签页应用中，确保用户在切换标签页时仍然保持登录状态，并且能够正确显示主页标题。

问题描述

在添加身份验证后，用户在其他选项卡屏幕上无法正确显示主页标题。

原因

状态未同步：React Navigation的状态在不同标签页之间未正确同步。
Token失效：Token可能过期或未正确传递到其他标签页。
页面渲染问题：页面组件在某些情况下未能正确渲染。

解决方案

以下是一个示例代码，展示如何在React Navigation中处理身份验证并确保主页标题正确显示：

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;