Реагируйте с родным BottomTabNavigator с DrawerNavigator, как сохранить нижний навигатор видимым все время - PullRequest
Новая
       96

Реагируйте с родным BottomTabNavigator с DrawerNavigator, как сохранить нижний навигатор видимым все время

0 голосов
/ 06 октября 2018

Я просмотрел различные посты на SO и github о реагирующей навигации, но большинство из них представляют собой комбинацию встроенного стекового навигатора и навигатора.Я не смог найти ничего, что могло бы помочь решить мою проблему.

Что я пытаюсь сделать, так это то, что у меня есть нижняя панель вкладок с пятью экранами, которые прекрасно загружаются с правильными данными, я хочу добавить навигатор в ящикпредоставить больше экранов и иметь разные данные.Мне удалось построить навигатор ящиков поверх навигатора вкладок, но когда ящик открыт, он перекрывает нижнюю панель вкладок и, следовательно, навигация по нижним вкладкам бесполезна, пока ящик открыт.Кроме того, при добавлении вкладок под навигатором ящика в качестве одного из параметров в меню ящика отображается 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',
    })

Может кто-нибудь помочь мне с этим, пожалуйста?

Спасибо, Викрам

Ответы [ 2 ]

0 голосов
/ 04 апреля 2019 
/**
 * 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,
  },
});
0 голосов
/ 07 октября 2018

Ну, я пытался, и это близко к тому, что вы хотите.Фон 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} />
        }
    )
...