我是新来的响应本地人,并试图在这里开始我的导航。我将所有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;