react-native - 带有选项卡导航的 react-native 抽屉导航
问题描述
我正在尝试在我的应用程序中设置顶部菜单和选项卡菜单。底部选项卡正在工作,但顶部菜单未显示。我要设置的顶部菜单是我们单击并显示左侧菜单选项的菜单。
class App extends Component {
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={store}>
<AppContainer
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
</Provider>
);
}
}
export default App;
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const TabNavigator = createBottomTabNavigator({
Home: HomeScreen,
Settings: SettingsScreen,
});
const MainStackNavigator = createStackNavigator({
Home: {
screen: TabNavigator
}
});
const AppDrawerNavigator = createDrawerNavigator({
Home:{
screen: MainStackNavigator
}
});
const AppSwitchNavigator = createSwitchNavigator({
Login: { screen: Login },
Main: { screen: AppDrawerNavigator }
});
const AppContainer = createAppContainer(AppSwitchNavigator);
我是 react native 的新手,所以我不确定设置导航器选项的顺序。我做错了什么?
谢谢
解决方案
我已经将一些代码作为示例,其中 aMainDrawerNavigator
包含MainTabNavigator
. 选项卡导航器为此包含三个堆栈导航器,我将仅引用HomeScreenNavigator
它是堆栈导航器。默认情况下,这将在我的主页选项卡中显示一个堆栈标题,但不会显示一个抽屉图标来打开抽屉。为此,您需要放入一个图标来切换抽屉。我已经通过访问具体显示的内容来展示这navigationOptions
一点HomeScreen
:
static navigationOptions = (navData) => {
return {
headerLeft: (
<View style={styles.headerButtonLeft}>
<HeaderButtons HeaderButtonComponent={DefaultHeaderButton}>
<Item title="menu" iconName="ios-menu" onPress={() => {
navData.navigation.toggleDrawer()
}} />
</HeaderButtons>
</View>
),
}
}
上面将在左侧设置一个标题按钮,HomeScreen
然后按下Item
将触发通过 切换抽屉打开navData.navigation.toggleDrawer()
。您的示例将是相似的,除了您的最外层导航器似乎是您的切换导航器。
完整代码如下所示:(让我知道是否需要在其他地方进行澄清)。
主屏幕示例:
class HomeScreen extends React.Component {
constructor(props) {
super(props)
this.state = { ... }
}
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
static navigationOptions = (navData) => {
return {
headerLeft: (
<View style={styles.headerButtonLeft}>
<HeaderButtons HeaderButtonComponent={DefaultHeaderButton}>
<Item title="menu" iconName="ios-menu" onPress={() => {
navData.navigation.toggleDrawer()
}} />
</HeaderButtons>
</View>
),
}
}
}
HomeScreenNavigator 示例:
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from '../screens/HomeScreen';
import MediaSelectScreen from '../screens/MediaSelectScreen';
import FinalizePostScreen from '../screens/FinalizePostScreen';
import { userInterface } from '../constants/Colors';
import Styles from '../constants/Styles';
const HomeScreenNavigator = createStackNavigator({
Home: HomeScreen,
MediaSelect: MediaSelectScreen,
FinalizePost: FinalizePostScreen
}, {
defaultNavigationOptions: {
headerStyle: {
backgroundColor: userInterface.accentColor,
height: Styles.HEADER_HEIGHT,
},
}
});
export default HomeScreenNavigator;
MainTabNavigator 示例:
import { createBottomTabNavigator } from 'react-navigation-tabs';
import MessagesScreen from '../screens/MessagesScreen';
import HomeScreenNavigator from './HomeScreenNavigator';
import LearnScreenNavigator from './LearnScreenNavigator';
const MainTabNavigator = createBottomTabNavigator({
LearnScreen: { screen: LearnScreenNavigator, navigationOptions: () => ({
tabBarLabel: 'Learn'
})},
HomeScreen: { screen: HomeScreenNavigator, navigationOptions: {
tabBarLabel: 'Home'
}},
MessagesScreen: { screen: MessagesScreen, navigationOptions: {
tabBarLabel: 'Messages'
}},
});
export default MainTabNavigator;
MainDrawerNavigator 示例:
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createAppContainer } from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';
const MainDrawerNavigator = createDrawerNavigator({
DrawerNav: MainTabNavigator
}, {
drawerType: 'slide'
});
export default createAppContainer(MainDrawerNavigator);
App.js 示例:
import React from 'react';
import * as Font from 'expo-font';
import { AppLoading } from 'expo';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import AppSwitchNavigator from './navigation/AppSwitchNavigator';
export default class App extends React.Component {
state = { ... }
render() {
return (
<Provider store={store}>
<AppSwitchNavigator/>
</Provider>
);
}
}
const store = createStore(rootReducer);
const rootReducer = combineReducers({ ... });
推荐阅读
- xaml - 定义 Shell.TitleView,同时在 shell 中保留选项卡的标题文本,但似乎以不同的字体显示
- java - 如何从 Android 本地存储中获取媒体文件(图像、视频、音频)?
- angular - 如何在 mat-menu 中设置空消息的样式?
- c# - 如何从 Oracle 数据库获取定期更新到客户端(轮询除外)?
- push-notification - 如何正确处理注册用户的登录/注销而不向注销用户发送通知?
- c# - C# MongoDB - 从数据库中读取一条记录并将其写入流
- c# - 一对一的EF关系
- angular - angular - 如何将组件内声明的变量的值获取到服务文件?
- java - 为什么用户在 Java 中总是返回 true?
- c# - “VirtualButtonBehaviour”不包含“RegisterOnButtonPressed”的定义