如何设置父级的 NavigationOptions？

Question

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

我的 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”的所有其他屏幕上工作，但不能在“历史”等任何其他屏幕上工作。

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

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

Answer 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

Answer 2

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