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的{{1}}来举例说明。标签导航器包含三个堆栈导航器，为此，我仅引用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()

HomeScreenNavigator示例：

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>
            ),
        }
    }
}

MainTabNavigator示例：

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;

MainDrawerNavigator示例：

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;

App.js示例：

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);

使用选项卡导航的本机抽屉导航

1 个答案: