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”屏幕上运行，但不能在“ History”之类的其他屏幕上运行。

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

希望您能理解我的问题。真希望能尽快为您解答。谢谢大家！

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中将标头设置为null，并将我的标头组件作为常规组件添加到屏幕中，并执行了所有逻辑，这不是最佳实践，而是一种解决方法：）

如何设置父项的NavigationOptions？

2 个答案: