反应本机导航-屏幕显示后退按钮而不是DrawerNavigation

时间:2018-11-22 22:52:53

标签: android react-native react-navigation react-navigation-drawer

我是新来的响应本地人,并试图在这里开始我的导航。我将所有JSON变量都放在一个文件中,并将其放在这里。我要使用“主页”和“设置”打开“抽屉”,这是可以的。但是,当我在“设置”屏幕上时,只有后退按钮,而不是HamburgerIcon和DrawerNavigator。这是我的代码,您能否在“设置”中描述如何制作像主页一样的普通操作栏(此处是白色标题(操作栏)而不是dark_cyan)。

import React from 'react';
import { Platform } from 'react-native';
import {
  TabNavigator,
  StackNavigator,
  DrawerNavigator,
} from 'react-navigation';
import { FontAwesome, Ionicons } from '@expo/vector-icons';

import WelcomeScreen from './screens/Welcome';
import HomeScreen from './screens/Home';
import ProfileScreen from './screens/Profile';
import FavoritesScreen from './screens/Favorites';
import SettingsScreen from './screens/Settings';
import ImageIcon from './components/ImageIcon'
import { HamburgerIcon, SettingsIcon, BackIcon } from './components/icons';
const day_icon = require('../assets/icons/ic_day.png');
const week_icon = require('../assets/icons/ic_week.png');
const month_icon = require('../assets/icons/ic_month.png');

import { CustomDrawerContent } from './components';
import { colors } from './utils/constants';

const AppMainTab = TabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: ({ navigation }) => ({
      drawerLabel: 'Domů',
      drawerIcon: ({ tintColor }) => (
        <FontAwesome name="home" size={23} color={tintColor} />
      ),
      tabBarLabel: 'Denní program',
      tabBarIcon: ({ tintColor }) => (
        <ImageIcon tintColor={tintColor} text="DEN" src={day_icon} />
      ),
      headerStyle: {
        backgroundColor: colors.CYAN_DARK,
      },
      headerTitle: 'Denní program',
      headerTitleStyle: {
        color: colors.WHITE,
      },
      headerLeft: <HamburgerIcon onPress={() => navigation.navigate('DrawerOpen')} />,
    })
  },
  Favorites: {
    screen: FavoritesScreen,
    navigationOptions: ({ navigation }) => ({
      drawerLabel: 'Týdenní program',
      drawerIcon: ({ tintColor }) => (
        <ImageIcon tintColor={tintColor} text="TÝDEN" src={week_icon} />
      ),
      tabBarLabel: 'Týdenní program',
      tabBarIcon: ({ tintColor }) => (
        <ImageIcon tintColor={tintColor} text="TÝDEN" src={week_icon} />
      ),
      headerStyle: {
        backgroundColor: colors.CYAN_DARK,
      },
      headerTitle: 'Týdenní program',
      headerTitleStyle: {
        color: colors.WHITE,
      },
      headerLeft: <HamburgerIcon onPress={() => navigation.navigate('DrawerOpen')} />,
    })
  },
  Profile: {
    screen: ProfileScreen,
    navigationOptions: ({ navigation }) => ({
      drawerLabel: 'Měsíční program',
      drawerIcon: ({ tintColor }) => (
        <ImageIcon tintColor={tintColor} src={month_icon} text="MĚSÍC" />
      ),
      tabBarLabel: 'Měsíční program',
      tabBarIcon: ({ tintColor }) => (
        <ImageIcon tintColor={tintColor} src={month_icon} text="MĚSÍC" />
      ),
      headerStyle: {
        backgroundColor: colors.CYAN_DARK,
      },
      headerTitle: 'Měsíční program',
      headerTitleStyle: {
        color: colors.WHITE,
      },
      headerLeft: <HamburgerIcon onPress={() => navigation.navigate('DrawerOpen')} />,
      headerRight: <SettingsIcon onPress={() => navigation.navigate('Settings')} />,
    })
  },
}, {
  tabBarOptions: {
    activeTintColor: colors.WHITE,
      inactiveTintColor: colors.BLUE_LIGHT,
    inactiveBackgroundColor: colors.GRAY_LIGHT,
    activeBackgroundColor: colors.WHITE,
    showIcon: true,
    showLabel: Platform.OS === 'ios',
    indicatorStyle: {
      backgroundColor: colors.GRAY_LIGHT,
    },
    style: {
      backgroundColor: colors.CYAN_DARK,
    },
    upperCaseLabel: false,
  },
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  animationEnabled: false,
});


const AppMainStack = StackNavigator({
  Home: { screen: AppMainTab },
  Settings: { screen: SettingsScreen },
}, {
  cardStyle: {
    backgroundColor: colors.GRAY_LIGHT,
  },
  mode: 'modal',
});
const AppDrawer = DrawerNavigator({
  Home: {
    screen: AppMainStack,
  },
  Settings: {
    screen: SettingsScreen,
    navigationOptions: ({ navigation }) => ({
      drawerLabel: 'Settings',
      drawerIcon: ({ tintColor }) => (
        <Ionicons name="md-settings" size={23} color={tintColor} />
      ),
      headerStyle: {
        backgroundColor: colors.DARK_CYAN,
      },
      headerTitle: 'Settings',
      headerTitleStyle: {
        color: colors.DARK_CYAN,
      },
      headerLeft: <HamburgerIcon onPress={() => navigation.navigate('DrawerOpen')} />,
        }),
  },
}, {
  contentComponent: props =>
    (<CustomDrawerContent
      {...props}
        />),
  contentOptions: {
    activeBackgroundColor: colors.CYAN_DARK,
    activeTintColor: colors.WHITE,
        inactiveTintColor: colors.CYAN_DARK,
  },
});
// const Navigator = TabNavigator({
//   Welcome: { screen: WelcomeScreen },
//   Main: { screen: AppDrawer },
// }, {
//   navigationOptions: {
//     tabBarVisible: false,
//   },
//   swipeEnabled: false,
// });

const Navigator = DrawerNavigator({
  Main: { screen: AppDrawer },
}, {
  navigationOptions: {
    tabBarVisible: false,
  },
  swipeEnabled: false,
});

export default Navigator;

0 个答案:

没有答案