用 DrawerNavigator 反应原生 BottomTabNavigator，如何让底部导航器一直可见

Question

我在 SO 和 github 上浏览过各种关于 react 导航的帖子，但其中大多数是 react native stack navigator 和抽屉导航器的组合。我找不到任何可以帮助解决我的问题的方法。

我想要做的是我有一个带有五个屏幕的底部标签栏，可以很好地加载正确的数据，我想添加一个抽屉导航器以提供更多屏幕并具有不同的数据。我已经设法在选项卡导航器的顶部构建了抽屉导航器，但是当抽屉打开时，它与底部选项卡栏重叠，因此只要抽屉打开，底部选项卡导航就没有用。此外，在抽屉导航器下添加选项卡会将 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

/**
 * 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,
  },
});

Answer 2

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

const CustomDrawerContentComponent = (props) => (
    <View style={{height:500}} >
    <ScrollView
              horizontal
              style={{ backgroundColor: 'blue'}}
            ><DrawerItems {...props} />
      </ScrollView>
    </View>
);

const Drawer = createDrawerNavigator({
           Tabs: {screen: Tabs},
           Gallery: { screen: Home },
       },{
          drawerBackgroundColor : 'transparent',
          contentComponent: props => <CustomDrawerContentComponent {...props} />
        }
    )