React Native子组件调用父组件Hook失败，求全局状态解决方案

方案1：通过Props传递状态更新函数 #

这是父子组件间共享状态更新逻辑的最直接方式：

修改TabNav组件 #

封装一个带状态更新函数的组件，传递给Tab.Screen：

const TabNav = () => {
  const [auth, setAuth] = React.useState(false);

  // 包装SignInScreen，注入setAuth
  const SignInScreenWithAuth = (props) => {
    return <SignInScreen {...props} setAuth={setAuth} />;
  };

  if (auth) {
    return (
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Home" component={HomeScreenTab} options={{ headerShown: false }} />
        </Tab.Navigator>
      </NavigationContainer>
    );
  } else {
    return (
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen 
            name="Sign In" 
            component={SignInScreenWithAuth} 
            options={{ headerShown: false }} 
          />
        </Tab.Navigator>
      </NavigationContainer>
    );
  }
};

修改SignInScreen组件 #

接收并使用props中的setAuth：

const SignInScreen = (props) => {
  const { setAuth } = props;

  function auth() {
    setAuth(true);
  }

  return (
    <SafeAreaView>
      <Text>Sign In Screen</Text> 
      <Button title="Button to auth" onPress={auth} />
    </SafeAreaView>
  );
};

方案2：使用React Context实现全局状态管理 #

如果需要在多个无关组件中访问auth状态，推荐用Context API实现全局共享：

1. 创建AuthContext #

import React, { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [auth, setAuth] = useState(false);

  return (
    <AuthContext.Provider value={{ auth, setAuth }}>
      {children}
    </AuthContext.Provider>
  );
};

// 自定义Hook简化调用
export const useAuth = () => {
  return useContext(AuthContext);
};

2. 在根组件包裹AuthProvider #

// App.js示例
import { AuthProvider } from './AuthContext';
import TabNav from './TabNav';

const App = () => {
  return (
    <AuthProvider>
      <TabNav />
    </AuthProvider>
  );
};

export default App;

3. 修改TabNav组件 #

直接通过自定义Hook获取auth状态：

import { useAuth } from './AuthContext';

const TabNav = () => {
  const { auth } = useAuth();

  if (auth) {
    return (
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Home" component={HomeScreenTab} options={{ headerShown: false }} />
        </Tab.Navigator>
      </NavigationContainer>
    );
  } else {
    return (
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Sign In" component={SignInScreen} options={{ headerShown: false }} />
        </Tab.Navigator>
      </NavigationContainer>
    );
  }
};

4. 修改SignInScreen组件 #

通过自定义Hook获取setAuth：

import { useAuth } from './AuthContext';

const SignInScreen = () => {
  const { setAuth } = useAuth();

  function auth() {
    setAuth(true);
  }

  return (
    <SafeAreaView>
      <Text>Sign In Screen</Text> 
      <Button title="Button to auth" onPress={auth} />
    </SafeAreaView>
  );
};

优化提示 #

• 避免重复渲染NavigationContainer，可以将其提到AuthProvider外层，减少不必要的组件卸载/挂载
• 方案1适合简单的父子传值场景，方案2适合多组件共享状态的复杂场景

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