React Native如何通过Tab Navigator向页面组件传递props？

有两种常用方案可以实现将language和setLanguage传递给Tab页面组件，根据你的场景选择即可：

方案一：直接通过Screen的子组件传递（适合少量组件） #

直接在Tab.Screen中使用函数式子组件，把需要的自定义props和导航自带的navigation、route一起传递给目标组件：

export const NavigationMenu = ({ language, setLanguage }: props) => {
 return (
   <NavigationContainer>
     <Tab.Navigator>
       <Tab.Screen name="Setting">
         {/* 传递导航props和自定义props */}
         {(navProps) => <SettingScreen {...navProps} language={language} setLanguage={setLanguage} />}
       </Tab.Screen>
       <Tab.Screen name="Input">
         {(navProps) => <Input {...navProps} language={language} setLanguage={setLanguage} />}
       </Tab.Screen>
     </Tab.Navigator>
   </NavigationContainer>
 );
};

这样SettingScreen和Input组件就能同时拿到导航相关的方法（比如navigation.navigate）和你自定义的language、setLanguage。

方案二：使用React Context（适合多组件共享状态） #

如果你的多个页面都需要访问language和setLanguage，用Context可以避免重复传递props，更易维护：

1. 创建Language Context #

// 创建一个单独的LanguageContext.js文件
import { createContext, useContext } from 'react';

const LanguageContext = createContext({});

export const LanguageProvider = ({ children, language, setLanguage }) => {
  return (
    <LanguageContext.Provider value={{ language, setLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
};

// 封装自定义hooks简化组件调用
export const useLanguage = () => useContext(LanguageContext);

2. 在导航器外层包裹Provider #

export const NavigationMenu = ({ language, setLanguage }: props) => {
 return (
   <LanguageProvider language={language} setLanguage={setLanguage}>
     <NavigationContainer>
       <Tab.Navigator>
         <Tab.Screen name="Setting" component={SettingScreen}/>
         <Tab.Screen name="Input" component={Input}/>
       </Tab.Navigator>
     </NavigationContainer>
   </LanguageProvider>
 );
};

3. 在子组件中获取状态 #

// SettingScreen.js
import { useLanguage } from './LanguageContext';

const SettingScreen = () => {
  const { language, setLanguage } = useLanguage();
  
  // 直接使用这两个值即可
  return (
    // 组件内容
  );
};

注意：不要用initialParams传递这类动态变化的状态——它仅适用于静态初始值，当language更新时，子组件不会同步获取最新值，因此不适合当前场景。

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