帶有標簽導航的本機抽屜導航

Question

我正在嘗試在我的應用程序中設置頂部菜單和選項卡菜單。 底部選項卡正在工作，但頂部菜單未顯示。 我試圖設置的頂部菜單是我們單擊的菜單，左側菜單選項顯示。

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 的新手，所以我不確定設置導航器選項的順序。 我做錯了什么？

謝謝

Answer 1

我已經把一些代碼作為一個例子MainDrawerNavigator包含MainTabNavigator 。 為此，選項卡導航器包含三個堆棧導航器，我將僅引用HomeScreenNavigator ，它是一個堆棧導航器。 默認情況下，這將在我的“主頁”選項卡內顯示一個堆棧標題，但不會顯示用於打開抽屜的抽屜圖標。 為此，您需要放置一個圖標來切換抽屜。 我已經通過訪問專門顯示的主HomeScreen的navigationOptions來展示這一點：

    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({ ... });