React Native导航问题：登录后页面未更新的实现疑问

我正在实现登录页面与首页功能，期望点击登录按钮后，RequireAuth组件能切换显示目标组件，但点击按钮后该组件并未更新。打印loggedIn变量发现点击后其值确实改变了，但组件没触发重渲染。我见过其他登录处理方案，但想知道能不能按当前思路实现。

代码示例 #

import {View, Text, Button, Platform} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

var loggedIn = false;

function RequireAuth(Comp: any) {
console.log("requirecomp", loggedIn)
return(
<View>
{loggedIn === true
? <Comp/>
: <LoginPage/>
}
</View>
)
}

const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home">
{props => <RequireAuth {...props} Comp={HomePage}>}
</Stack.Screen>
</Stack.Navigator>
</NavigationContainer>
);
}

function HomePage() {
return(
<View>
<Text>This is the home page</Text>
</View>
)
}

function LoginPage() {
return(
<View>
<Text>This is the login page</Text>
<Button title='Log In Please' onPress={() => {console.log("pressed"); loggedIn=true;}}>
</View>
)
}

你的思路完全可行，问题出在全局变量loggedIn无法触发React组件重渲染。React仅会在组件的状态（useState）或props变化时重新渲染组件，全局变量的修改不会被React的状态追踪机制感知到。

只需把全局变量替换为React的状态，并将状态提升到共享的父组件中，就能让RequireAuth和LoginPage共享状态并触发更新：

修改后的代码 #

import {View, Text, Button, useState} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

// 调整RequireAuth，接收登录状态和状态更新函数
function RequireAuth({ Comp, loggedIn, setLoggedIn }) {
  console.log("requirecomp", loggedIn)
  return(
    <View>
      {loggedIn === true
        ? <Comp/>
        : <LoginPage setLoggedIn={setLoggedIn}/>
      }
    </View>
  )
}

function App() {
  // 在App组件中维护登录状态
  const [loggedIn, setLoggedIn] = useState(false);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home">
          {props => (
            <RequireAuth 
              {...props} 
              Comp={HomePage} 
              loggedIn={loggedIn} 
              setLoggedIn={setLoggedIn}
            />
          )}
        </Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function HomePage() {
  return(
    <View>
      <Text>This is the home page</Text>
    </View>
  )
}

// LoginPage通过props接收状态更新函数，点击时修改登录状态
function LoginPage({ setLoggedIn }) {
  return(
    <View>
      <Text>This is the login page</Text>
      <Button 
        title='Log In Please' 
        onPress={() => {
          console.log("pressed"); 
          setLoggedIn(true); 
        }}
      />
    </View>
  )
}

核心修改说明 #

1. 用useState替代全局变量，让React能够追踪登录状态的变化
2. 将loggedIn状态和setLoggedIn更新函数通过props传递给RequireAuth和LoginPage
3. 点击登录按钮时调用setLoggedIn(true)，触发状态更新，进而让RequireAuth重渲染并切换显示组件

这样既保留了你原本的组件结构思路，又解决了组件不更新的问题。

内容的提问来源于stack exchange，提问作者Nuxx