Реагируйте на собственную навигацию - на экране вместо кнопки DrawerNavigation отображается кнопка - PullRequest
0 голосов
/ 23 ноября 2018

я новичок, чтобы отреагировать на родную и пытаюсь заставить мою навигацию работать здесь.У меня есть все переменные 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;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...