如何设置父级的 NavigationOptions？

Posted 2023-04-13

【中文标题】如何设置父级的 NavigationOptions？

【英文标题】：How to set NavigationOptions of a parent?

【发布时间】：2019-04-18 18:08:07

【问题描述】：

我在我的应用程序中嵌套了导航器。我希望我的标题栏设置在导航的根目录上，这样我的应用程序中的所有屏幕都会有一个相互的标题栏。

我的 index.js 是：

const StackOpportunityNavigator = createStackNavigator(

  MainOpportunity: OpportunityScreen,
  ClientScreen: ClientScreen,
  BusinessMapLocation: BusinessMapLocation,
  LoginScreen: LoginScreen
,

  initialRouteName: 'MainOpportunity',
  headerMode: 'none',
  transitionConfig: () => fromLeft(600),    
 
);

const DrawerNavigationOptions = createDrawerNavigator(

   OpportunityStack:  screen: StackOpportunityNavigator ,
   History: HistoryScreen,
   MyChances: MyChancesScreen,
   Info: InfoScreen
,

  contentComponent: (props) => <SideBar ...props />,
  drawerPosition: 'right',
  transitionConfig: () => fromLeft(600),
 
);

const LoginNavigator = createStackNavigator(

   LoadingScreen: LoadingScreen,
   LoginScreen: LoginScreen,
   DrawerNavigator: DrawerNavigationOptions
,

 transitionConfig: () => fromLeft(600),
 headerMode: 'screen',
 navigationOptions: 
   headerStyle: 
     backgroundColor: Colors.primary
   ,
   headerTintColor: '#fff',
   headerTitleStyle: 
     fontWeight: 'normal',
     fontSize: 18
   
  
 
);

export default LoginNavigator;

在我的应用程序的每个屏幕中，我都有以下代码：

static navigationOptions = 
      header: <HeaderBar title='currentScreenTitle' />
  ;

但是，它可以在“LoginScreen”屏幕和“LoginNavigator”的所有其他屏幕上工作，但不能在“历史”等任何其他屏幕上工作。

如果我的导航标题栏位于最根导航器中，我如何仍能从“历史记录”等其他屏幕控制导航选项并设置标题？

希望你能理解我的问题。 真心希望能尽快得到您的答复。 谢谢大家！

【问题讨论】：

试试this.props.navigation.getParent.setOptions: reactnavigation.org/docs/navigation-prop/#getparent

【参考方案1】：

据我了解，无法从嵌套屏幕中访问父导航器。

文档指出：“You can only modify navigation options for a navigator from one of its screen components. This applies equally to navigators that are nested as screens。”

这不是很方便，但我认为创建自己的组件是实现此目的的唯一方法。不过，有一个有用的库可以让您更轻松地创建标题组件。 React Native Elements

【参考方案2】：

我遇到了同样的问题，我在 navigationOptions 中将 header 设为 null 并将我的 header 组件添加到屏幕中作为常规组件并执行所有逻辑，这不是最佳实践，而是一种解决方法:)

【讨论】：

是的，我也这样做了......但我真的很想学习编码的最佳实践，我想我只是想念一些简单的解决方案