Question

我有以下 header.js

  import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import {MaterialCommunityIcons} from '@expo/vector-icons';


export default function header({navigation}, title) {

    const openMenu =() => {
        navigation.openDrawer()
    }
    return (
        <View style={styles.header}>
            <MaterialCommunityIcons name='menu' 
    size={24} color='black'
    onPress={openMenu}
    style={styles.icon}
    />
            <View style={styles.headerTitle}>
            <Image style={styles.logo} source={require('../assets/oau-ico-hat.png')}/>
                <Text style={styles.headerText}>title={title}</Text>
               
                {/*  */}
                
            </View>
                  </View>
    )
}
const styles = StyleSheet.create({
    header:{
     width:'100%',
        height: '100%',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
        
        
    },
    headerText:{
        fontWeight: 'bold',
        fontSize: 20,
        color: '#333',
        letterSpacing: 1,
        marginTop:8,
        marginHorizontal: 50,
        marginLeft:10,
    },
    logo: {
        width: 40,
        height: 40,
        
       
    },
    icon:{
        position:'absolute',
        left: 0.7,
    },
    headerTitle:{
        flexDirection:'row',
       
    },
})

然后我有了以下 App.js

const Drawer = createDrawerNavigator();
const DrawerNavigator=() => {
  return (
    <Drawer.Navigator
     drawerContent={props => <DrawerContent {...props}
     />}
     >
      <Drawer.Screen name="Home" component={StackNavigator}
     
      
      />
      <Drawer.Screen name="Faculties" component={Faculty}
      />
    </Drawer.Navigator>
  )
}
const Tab = createBottomTabNavigator();
const TabNavigator = ({navigation}) => (
  <Tab.Navigator 
  screenOptions={{
    headerStyle:{backgroundColor: "tomato" , elevation:0},
  headerTintColor:"#fff",
   headerTitleAlign:'center',
   
   headerTitle: () => <Header navigation={navigation} title='O.A.U'/>


 }}>
            <Tab.Screen name="Home" component={DrawerNavigator} />
     <Tab.Screen name="Faculties" component={Faculty} 
     
     /> 
    </Tab.Navigator>
)


const Stack = createStackNavigator();
const StackNavigator = ({navigation}) => (
  <Stack.Navigator   

  screenOptions={{
     headerStyle:{backgroundColor: "tomato" , elevation:0},
   headerTintColor:"#fff",
    headerTitleAlign:'center',
    
     headerTitle: () => <Header navigation={navigation} title='O.A.U'/>


  }}
  >
    <Stack.Screen name="Home" component={Home}
    options={() =>  {<Header navigation={navigation} title='O.A.U'/>}}
    
  
    />
    <Stack.Screen name="TabsBottom" component={Faculty}
   
    />
    
  </Stack.Navigator>
);

  

const styles = StyleSheet.create({
  header:{
   
    alignItems:'center',
},
})
export default function App() {
  return (
    <NavigationContainer>
      
     <TabNavigator/>
    </NavigationContainer>  
  );
}

我有 homeStack.js 在 React Navigation V4 中它的工作方式如下：任何想法我怎样才能让它在 V% react-navigation 中工作

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';

import Header from '../shared/header';
import Home from '../screens/homeScreen';
import Faculty from '../screens/faculties'

const screens ={
    Home: {
        screen: Home,
        screenOptions:({ navigation } )=> {
            return {
            headerTitle: () => <Header navigation={navigation} title='O.A.U'/>,
        }
        }
    },
   
    Faculty: {
        screen: Faculty,
        navigatioptions:({ navigation } )=> {
            return {
            headerTitle: () => <Header navigation={navigation} title='O.A.U'/>,
        }
        }
    }
}

const HomeStack = createStackNavigator();
export default HomeStack;

我有一个用于抽屉的 drwer.js 如下：

import React from "react";
import { StyleSheet, View } from "react-native";
import {
  DrawerContentScrollView,
  DrawerItem,
  DrawerItemList,
} from "@react-navigation/drawer";

import {
  Avatar,
  Title,
  Caption,
  Paragraph,
  Drawer,
  Text,
  TouchableRipple,
  Switch,
} from "react-native-paper";
import { MaterialCommunityIcons, FontAwesome5 } from "@expo/vector-icons";

import Home from './homeStack'

export function DrawerContent({ ...props }) {
  return (
    <View style={{ flex: 1 }}>
      <DrawerContentScrollView {...props}>
        {/* <DrawerItemList {...props}/> */}
        <DrawerItem
          icon={({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          )}
          label="Home"
          onPress={() => props.navigation.navigate("Home")}
        />
        <DrawerItem
          icon={({ color, size }) => (
            <FontAwesome5 name="university" color={color} size={size} />
          )}
          label="Faculties"
          onPress={() => props.navigation.navigate("Faculties")}
        />
      </DrawerContentScrollView>
    </View>
  );
}

我的问题如下： 1.如何在所有屏幕中显示标题，因为标题将包含拉出抽屉菜单的菜单汉堡？ 2. 从选项卡中单击 Faculties 菜单时，抽屉菜单不起作用，除非我从选项卡导航中单击主菜单，我的嵌套导航是否正确或我哪里出错了？ P/S：请注意这是我第一次使用 React 开发移动应用程序。你可以看看github，看看你是否可以从那里提供帮助@https://github.com/sudani/Uni_app.git

Answer 1

在过去 2 天寻找答案后，我找到了很棒的 youtube 教程，我对规则发布链接感到困惑，但在这里我设法做到了：删除所有堆栈屏幕，标签屏幕以分离文件，然后将文件导入 App.js：文件如下：

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import HomeScreen  from './homeScreen'
import FacultyScreen  from './faculties';

const HomeStack = createStackNavigator();
const FacultyStack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();
const MainTabScreen =() => (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#fff"
      barStyle={{ backgroundColor: 'tomato' }}
    >
      <Tab.Screen
        name="Home"
        component={HomeStackScreen}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Faculty"
        component={FacultyStackScreen}
        options={{
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="bell" color={color} size={26} />
          ),
        }}
      />
    
    </Tab.Navigator>
)
export default MainTabScreen;
const HomeStackScreen =({navigation}) => (
    <HomeStack.Navigator
    screenOptions={{
        headerStyle: { backgroundColor: "tomato", elevation: 0 },
       headerTintColor: "#fff",
       headerTitleAlign: "center",
        headerShown:true,
        
      }}
    >
        <HomeStack.Screen name= "Home" component={HomeScreen}
        options={{
            title:'Overview',
            headerLeft: () => (
                <Icon.Button name="ios-menu" size={26}
                backgroundColor="tomato" onPress={() => navigation.openDrawer() }></Icon.Button>
            )
        }}
        />
    </HomeStack.Navigator>
)

const FacultyStackScreen =({navigation}) => (
    <FacultyStack.Navigator
    screenOptions={{
        headerStyle: { backgroundColor: "tomato", elevation: 0 },
       headerTintColor: "#fff",
       headerTitleAlign: "center",
        headerShown:true,
        
      }}
    >
        <FacultyStack.Screen name= "Faculty" component={FacultyScreen}
        options={{
            
            headerLeft: () => (
                <Icon.Button name="ios-menu" size={26}
                backgroundColor="tomato" onPress={() => navigation.openDrawer() }></Icon.Button>
            )
        }}
        />
    </FacultyStack.Navigator>
)

然后App.js如下：

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import MainTabScreen from './app/screens/MaintabScreen';


import { DrawerContent } from "./app/routes/drawer";


const Drawer = createDrawerNavigator();
export default function App() {
    return (
      <NavigationContainer initialRouteName= "Home">
         
       <Drawer.Navigator drawerContent={(props) => <DrawerContent {...props} />}>
           <Drawer.Screen name="Home" component={MainTabScreen}/>
           {/* <Drawer.Screen name="Faculty" component={FacultyStackScreen}/> */}
       </Drawer.Navigator>
      </NavigationContainer>
    );
  }

抽屉助手保持不变

import React from "react";
import { StyleSheet, View } from "react-native";
import {
  DrawerContentScrollView,
  DrawerItem,
  DrawerItemList,
} from "@react-navigation/drawer";

import {
  Avatar,
  Title,
  Caption,
  Paragraph,
  Drawer,
  Text,
  TouchableRipple,
  Switch,
} from "react-native-paper";
import { MaterialCommunityIcons, FontAwesome5 } from "@expo/vector-icons";

import Home from './homeStack'

export function DrawerContent({ ...props }) {
  return (
    <View style={{ flex: 1 }}>
      <DrawerContentScrollView {...props}>
        {/* <DrawerItemList {...props}/> */}
        <DrawerItem
          icon={({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          )}
          label="Home"
          onPress={() => props.navigation.navigate("Home")}
        />
        <DrawerItem
          icon={({ color, size }) => (
            <FontAwesome5 name="university" color={color} size={size} />
          )}
          label="Faculties"
          onPress={() => props.navigation.navigate("Faculty")}
        />
      </DrawerContentScrollView>
    </View>
  );
}

我发现这是一种管理嵌套导航的简单方法，如果有人有更好的改进建议，这几乎就是我想要的

需要在反应原生导航 V5

1 个答案: