Question

我在SO和github上浏览了很多有关react导航的文章，但是其中大多数是react native堆栈导航器和抽屉导航器的组合。我找不到能帮助解决问题的任何东西。

我想做的是，我有一个带有五个屏幕的底部标签栏，可以很好地加载正确的数据，我想添加一个抽屉式导航器以提供更多的屏幕并具有不同的数据。我设法将抽屉式导航器构建在选项卡导航器的顶部，但是当抽屉打开时，它与底部的选项卡栏重叠，因此只要抽屉打开，底部的选项卡导航就无用了。另外，在抽屉式导航器下方添加标签会显示Tabs作为抽屉式菜单中的选项之一。

我想实现的是 1.始终显示底部的标签导航。 2.打开抽屉时，抽屉菜单将打开，并且不会重叠在底部标签栏上。 3.抽屉菜单应该只包含那些可以从抽屉菜单进行导航的屏幕。

下面是我的导航代码，

    import React from 'react'

    // Navigators
    import { DrawerNavigator, StackNavigator, createBottomTabNavigator } from 'react-navigation'

    // TabNavigator screens
    import ProfileConnector from '../connectors/ProfileConnector'
    import InboxConnector from '../connectors/InboxConnector'
    import AttendanceConnector from '../connectors/AttendanceConnector'
    import Results from '../layouts/results/Results'
    import TimetableConnector from '../connectors/TimetableConnector'
    import Icon from 'react-native-vector-icons/Entypo'
    import {Dimensions} from 'react-native'

    const deviceW = Dimensions.get('window').width

    const basePx = 375

    function px2dp(px) {
    return px *  deviceW / basePx
    }

    import Gallery from '../layouts/gallery/Gallery'

    export const Tabs = createBottomTabNavigator({
        Profile: { 
            screen: ProfileConnector,
            navigationOptions: {
                tabBarLabel: 'Profile',
                tabBarIcon: ({tintColor}) => <Icon name="user" size={px2dp(22)} color={tintColor}/>,
            },
        },
        Inbox: { 
            screen: InboxConnector,
            navigationOptions: {
                tabBarLabel: 'Inbox',
                tabBarIcon: ({tintColor}) => <Icon name="inbox" size={px2dp(22)} color={tintColor}/>,
            },
        },
        Attendance: {
            screen: AttendanceConnector,
            navigationOptions: {
                tabBarLabel: 'Attendance',
                tabBarIcon: ({tintColor}) => <Icon name="hand" size={px2dp(22)} color={tintColor}/>,
            },
        },
        Timetable: {
            screen: TimetableConnector,
            navigationOptions: {
                tabBarLabel: 'Timetable',
                tabBarIcon: ({tintColor}) => <Icon name="calendar" size={px2dp(22)} color={tintColor}/>,
            },
        },
        Results: {
            screen: Results,
            navigationOptions: {
                tabBarLabel: 'Results',
                tabBarIcon: ({tintColor}) => <Icon name="bar-graph" size={px2dp(22)} color={tintColor}/>,
            },
        },
    }, {
        initialRouteName: 'Inbox',
        tabBarPosition: 'bottom',
        swipeEnabled: true,
        tabBarOptions: {
            activeTintColor: 'teal',
            inactiveTintColor: '#424949',
            activeBackgroundColor: "white",
            inactiveTintColor: '#424949',
            labelStyle: { fontSize: 14 },
            style : { height : 50}
        }
    });

    export const Drawer = DrawerNavigator({
        Tabs: {screen: Tabs},
        Gallery: { screen: Gallery },
    },{
        drawerWidth: 250,
        drawerPosition: 'left',
        drawerOpenRoute: 'DrawerOpen',
        drawerCloseRoute: 'DrawerClose',
        drawerToggleRoute: 'DrawerToggle',
    })

有人可以帮我吗？

谢谢，维克拉姆

Answer 1

好吧，我尝试过了，它很接近您想要的。 DrawerNavigator的背景是透明的，并且在 CustomDrawerContentComponent 中，将高度分配给视图以使底部的标签栏可见。希望对您有用。

screen_text = font.render('Test', True, red)
gameDisplay.blit(screen_text, (0, 0))
pygame.display.update()

pygame.quit()
time.sleep(2)

Answer 2

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow`enter code here`
 */
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Button} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {
  createBottomTabNavigator,
  createStackNavigator,
  createAppContainer,
  createDrawerNavigator,
  createSwitchNavigator,
} from 'react-navigation';
import Icons from 'react-native-ionicons';
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Details!</Text>
      </View>
    );
  }
}

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {/* other code from before here */}
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {/* other code from before here */}
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}
class LoginScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {/* other code from before here */}
        <Button
          title="Login"
          onPress={() => this.props.navigation.navigate('Home')}
        />
      </View>
    );
  }
}

const HomeStack = createStackNavigator({
  Home: {screen:HomeScreen,
    navigationOptions: ({ navigation }) => ({
      title: `Home`,
      headerLeft:  <Icon name='md-menu' size={30} onPress={()=>{navigation.openDrawer()}}/>,
      headerStyle:{
        textAlign:'center',
        alignContent: 'center',
      }
    }),
  },
  Details:{screen: DetailsScreen,
    navigationOptions: ({ navigation }) => ({
      title: `Details`,
      //headerLeft:  <Icon name='md-menu' size={30}/>,
      headerStyle:{
        alignContent: 'center',
      }
    }),
  },
},{
   initialRouteName: 'Home',

}

);

const SettingsStack = createStackNavigator({
  Settings:{screen: SettingsScreen,
    navigationOptions: ({ navigation }) => ({
      title: `Privacy`,
      headerLeft:  <Icon name='md-menu' size={30}/>,
      headerStyle:{
        alignContent: 'center',
      }
    }),
  },
  Details: {screen:DetailsScreen,
    navigationOptions: ({ navigation }) => ({
      title: `Privacy Details`,
      //headerLeft:  <Icon name='md-menu' size={30}/>,
      headerStyle:{
        alignContent: 'center',
      }
    }),
  },
});
const bottomTabNavigator = createBottomTabNavigator(
  {
    Home: HomeStack,
    Settings: SettingsStack,
  }

)
// const bottomStack = createStackNavigator({
//   bottomTabNavigator
// },{

//     defaultNavigationOptions:({navigation})=>{
//       return {
//         headerLeft:  <Icon name='md-menu' size={30} onPress={()=>{navigation.openDrawer()}}/>,
//         title:navigation.state.routeName[navigation.state.index]


//       }
//     }

// })
const dashboardStack = createDrawerNavigator({
  Dashboard: bottomTabNavigator,

},)
const authStack = createSwitchNavigator({
  Login:LoginScreen,
  Dashboard:dashboardStack

})

export default createAppContainer(authStack);






const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

用DrawerNavigator响应本机BottomTabNavigator，如何始终保持底部导航器可见

2 个答案: