跨屏幕共享通用导航选项

Question

所以我无法在我的 React Native 项目中跨多个屏幕设置全局标题样式。

我已按照https://reactnavigation.org/docs/en/headers.html 中概述的步骤操作，但每次尝试运行时都会遇到语法错误。

我所做的只是设置标题背景颜色以及按钮和标题的色调。

我在下面附上了我的代码....如果有人能指出我做错了什么，将不胜感激。

[import React, { Component } from 'react';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';

import {View,Text,StyleSheet,Platform,TouchableOpacity,Image,StatusBar} from 'react-native';

import LoginScreen from '../screens/LoginScreen';
import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/ProfileScreen';
import CharityScreen from '../screens/CharityScreen';
import RunScreen from '../screens/RunScreen';

const DrawerNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen
  },
  Profile: {
    screen: ProfileScreen
  },
  Charity: {
    screen: CharityScreen
  },
  Run: {
    screen: RunScreen
  }

});

const StackNav = createStackNavigator({
  Login: {
    screen: LoginScreen
  },
  DrawerNav: {
    screen: DrawerNavigator
  },
  {
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#2b3991',
      },
      headerTintColor: '#fff'
    },
  },
});

export default StackNav;][1]

错误信息：

错误：捆绑失败：C:\Users\Michal\apps\run\src\nav\rootnav.js 中的 SyntaxError：C:/Users/Michal/apps/run/src/nav/rootnav.js：意外令牌(35:4) 33 |抽屉导航：{ 34 |屏幕：抽屉导航器，

35 | { | ^ 36 |导航选项：{ 37 |标题样式：{ 38 |背景颜色：'#2b3991'，

Answer 1

尝试此代码，因为您的代码中的 navigationOptions 存在语法错误

const StackNav = createStackNavigator({
   Login: {
    screen: LoginScreen
   },
   DrawerNav: {
   screen: DrawerNavigator
  },
}, 
{
 navigationOptions: {
  headerStyle: {
    backgroundColor: '#2b3991',
  },
  headerTintColor: '#fff'
 },
  }, 
);

Answer 2

Try designing the navigator like below:-

const StackNav = createStackNavigator(
  {
    Login: LoginScreen,
    DrawerNav: DrawerNavigator,
  },
  {
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#2b3991',
      },
      headerTintColor: '#fff'
    }
  }
);