时间戳

首页 > 解决方案 > 如何设置父级的 NavigationOptions？

reactjs - 如何设置父级的 NavigationOptions？

问题描述

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

我的 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”中的所有其他屏幕，但不适用于“历史”等任何其他屏幕。

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

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

标签： reactjsreact-nativeheadernavigationnavigator

解决方案

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

该文档指出：“您只能从其屏幕组件之一修改导航器的导航选项。这同样适用于嵌套为屏幕的导航器。”

这不是很方便，但我认为创建自己的组件是实现这一目标的唯一方法。不过，有一个有用的库可以让您更轻松地创建标头组件。反应原生元素

推荐阅读