Question

如何将Drawer Navigator和Tab Navigator一起显示？

仅通过更改

的顺序显示其中之一

 <TabNavigate /> ,
 <AppDrawerNav />

在这部分

export default class App extends Component {
render() {
return (
  <TabNavigate /> ,
  <AppDrawerNav />

   );
 }
}

*****************这是完整的代码*************************

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, SafeAreaView, ScrollView, 
Dimensions, Image } from 'react-native';
import { createDrawerNavigator, DrawerItems, createMaterialTopTabNavigator } 
from 'react-navigation';
import HomeScreen from './Screens/HomeScreen';
import SettingScreen from './Screens/SettingScreen';
import SwitchesScreen from './Screens/SwitchesScreen';
import SencesScreen from './Screens/SencesScreen';

export default class App extends Component {
  render() {
   return (
  <TabNavigate /> ,
  <AppDrawerNav />

    );
 }
}

const CustomDrawerContents = (props) => (
  <SafeAreaView style={{ flex: 1 }}>
    <View style={{ height: 150, backgroundColor: 'white', alignItems: 
  "center", justifyContent: "center" }}>
  <Image source={require('./Images/hotel.png')} style={{ height: 120, width: 
120, margin: 20 }} />
</View>
 <ScrollView>
   <DrawerItems{...props} />
 </ScrollView>
</SafeAreaView>
)

const AppDrawerNav = createDrawerNavigator({
  Home: HomeScreen,
  Settings: SettingScreen
 }, {
 contentComponent: CustomDrawerContents,
 drawerWidth: 200,
 contentOptions: {
  activeTintColor: 'orange'
   } 
  }
 )

 const TabNavigate = createMaterialTopTabNavigator({
 Switches: SwitchesScreen,
 Sences: SencesScreen
 },
 {
 tabBarPosition: "bottom",
 swipeEnabled: false,
 tabBarOptions: {
  activeTintColor: 'blue',
  inactiveTintColor: 'gray',
  showIcon: true,
  style: {
    backgroundColor: 'white'
  },
  indicatorStyle: {
    backgroundColor: 'teal',
    height: 0
  }
  }

  })

我发现了一些以前问过的类似问题，但没有一个对我有用

我要在所有页面中同时使用抽屉和标签页

我是初学者，请帮助我

谢谢

Answer 1

这是一个简单的示例代码：

首先，您需要安装。：react-navigation

$ npm i react-navigation --save

这是 App.js 示例：

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createBottomTabNavigator, createDrawerNavigator } from 'react-navigation';

class InitialScreen extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>Home</Text>
            </View>
        );
    }
}

class ConfigScreenApp extends Component {
    render() {
        return (
            <View style={[styles.container, {backgroundColor:'green'}]}>
                <Text>Config App Screen</Text>
            </View>
        );
    }
}

class ConfigScreenProfile extends Component {
    render() {
        return (
            <View style={[styles.container, {backgroundColor:'yellow'}]}>
                <Text>Config Profile Screen</Text>
            </View>
        );
    }
}

const ConfigScreen = createDrawerNavigator({
    ConfigScreenApp:{
        screen:ConfigScreenApp
    },
    ConfigScreenProfile:{
        screen:ConfigScreenProfile
    }
});

const Navegador = createBottomTabNavigator({
  Home: {
    screen:InitialScreen
  },
  Config: {
    screen:ConfigScreen
  }
});

const styles = StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        marginTop:20
    }
});

export default Navegador;

仅此而已。

如何将Drawer Navigator和Tab Navigator一起显示？

1 个答案: