标签: react-navigation-drawer

我正在进行一个诸如登录/注册应用程序之类的实践项目，并且正在从反应导航中使用堆栈导航，并且它运行良好，

现在，当用户登录时，他应该被重定向到仪表板屏幕，我想要在标题右侧添加一个抽屉 “我还添加了屏幕截图”，我也在堆栈导航中创建了仪表板屏幕，我不知道如何添加堆栈导航中的那个抽屉，我只想在我的仪表板屏幕上放置一个抽屉，以便有人可以提供帮助？谢谢

App.js（在其中添加了所有堆栈屏幕的位置）

    import React from 'react';

    import { createStackNavigator, createDrawerNavigator } from 'react-navigation';

    import HomeScreen from './screens/HomeScreen';
    import LoginScreen from './screens/LoginScreen';
    import RegisterScreen from './screens/RegisterScreen';
    import Dashboard from './screens/Dashboard';

    const StackNavigation = createStackNavigator({
      HomeStack: HomeScreen,
      LoginStack: LoginScreen,
      RegisterStack: RegisterScreen,
      DashboardStack: Dashboard,

    }, {
        initialRouteName: 'HomeStack',
      });

      const DrawerNav = createDrawerNavigator({
        DashboardStack: Dashboard,
      })


    export default class App extends React.Component {
      render() {
        return (
          <StackNavigation />
        );
      }
    }

Dashboard.js

    import React from 'react';
    import …

我在遇到问题react-navigation-drawer。

"react-native-gesture-handler": "^1.0.16",
"react-navigation": "^3.3.2"

这两个版本已安装。抽屉在Android和iPhone 5S中正常工作。但是，当我在iPhone X中运行该应用程序时，通过手势打开抽屉会引发错误。

调度了不受支持的顶级事件类型“ onGestureHandlerStateChange”

大家好，我正在尝试在我的应用程序中添加 react-navigation-drawer，我正面临这个问题。每当我打开抽屉时，背景或背景都会变成不透明的黑色。我尝试添加背景颜色，但对我不起作用。这是我的侧边栏代码：-

import { Text, TouchableOpacity, View,StyleSheet, ScrollView, Dimensions,BackHandler} from "react-native";
import Icon from 'react-native-vector-icons/Entypo';
const { width, height } = Dimensions.get("window");
const window = Dimensions.get("window");
let h = window.height / 812;
let w = window.width / 375;
let p = (h + w) / 2;

export default class SideBar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            refreshing: true,
            index: '',
        }
    }

    componentDidMount() {
        BackHandler.addEventListener("hardwareBackPress", () => this.hardwareBackPress);
    }

    componentWillUnmount() {
        BackHandler.removeEventListener("hardwareBackPress", () => this.hardwareBackPress);
    }

    hardwareBackPress() …

如何将自定义注销按钮添加到我的抽屉？我尝试了几件事，但似乎找不到解决方案。这就是我被困的地方。

import React from 'react';
import {TouchableOpacity, Image, Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';

const HomeStack = createStackNavigator();
const Drawer = createDrawerNavigator();

// Screens
import HomeScreen from '../containers/HomeContainer';

const HomeStackScreen = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="My Thoughts"
        component={HomeScreen}

      />
    </HomeStack.Navigator>
  );
};

function DrawerNavigation() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeStackSceen} />
      <TouchableOpacity>
       <Text>Logout</Text>
      </TouchableOpacity>
    </Drawer.Navigator>
  );
}

export const AppNavigation = () => {
  return (
    <NavigationContainer> …

我的HomeHeader组件是这样的：

import React from "react";
import { View, StyleSheet, Text, Image } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome5";

export default function HomeHeader({ navigation }) {
  return (
    <View style={styles.home_header}>
      <Icon
        style={styles.menu}
        name="bars"
        size={30}
        color="white"
        onPress={navigation.toggleDrawer()}
      />

      <Image
        style={styles.header_logo}
        source={require("../assets/logo.png")}
      />
      <Text>Hello</Text>
    </View>
  );
}

并在我的主屏幕中使用它，如下所示：

return (
  <View>
    <HomeHeader navigation={navigation} />
  </View>
)

但我收到此错误消息：

警告：无法从不同组件的函数体内部更新组件。

我想要做的是，我已将 HOME 屏幕的标题部分分离到一个名为 HomeHeader 的单独组件中。在这个组件中，我附加了事件处理程序来切换 DrawerNavigation（左侧抽屉菜单）的打开/关闭

如果我在主屏幕中创建一个 Button 并添加事件处理程序来切换抽屉，它工作正常。但是只有当我从我的 HomeHeader 组件内部尝试这个问题时才会发生。

顺便说一句，我正在使用 ReactNavigation v5，我什至尝试过这种方法：https ://reactnavigation.org/docs/connecting-navigation-prop/

到目前为止没有运气。

我有一个应用程序，我希望当用户单击某些导航路线时在当前页面上显示模式，而不是导航到完全不同的页面。我现有的代码是：

const DrawerNavigator = () => {
    return (
      <Drawer.Navigator>
        <Drawer.Screen name="My Porfolio" component={Portfolio} />
        <Drawer.Screen name="Account" component={Account} />
        <Drawer.Screen name="NBA" component = {NBALobby} />
        <Drawer.Screen name="NFL" component = {NFLLobby} />
        <Drawer.Screen name="How To Play" component = {HowToPlayModal} />
      </Drawer.Navigator>
    );
  }

我的模式按预期显示，但它似乎显示在一个新的、完全空白的页面上。有没有办法从抽屉导航器中调用显示模式的函数？

我的模态代码是：

import React, { Component, useState } from 'react';
import {Text, TextInput, View, TouchableOpacity} from 'react-native';
import Modal from 'react-native-modal';

import {styles} from '../styles/signUpIn';
    
const HowToPlayModal = () => {
    
    return(
        <Modal isVisible = {true}>
                <View style={styles.container2}> …

我正在使用React 导航库。我编写了一个自定义抽屉菜单并将其添加到导航器的contentComponent配置中。我不知道如何确定自定义菜单中哪个页面/屏幕处于活动状态。这是我的DrawerNavigator代码：

const DrawerNavigator = createDrawerNavigator({
    "Search Locations": {
        screen: SearchLocationsScreen,
    },
    "About": {
        screen: AboutScreen
    },
    "Favorites": {
        screen: FavoritesScreen
    },
    "Sign In": {
        screen: SignIn
    },
}, {
    contentComponent: props => <CustomDrawerComponent {...props} />
});

可能需要注意的是，我的DrawerNavigator嵌套在StackNavigator内。我将导航选项导出到一个单独的文件，如下所示：

export default (navigation) => {
    const {state} = navigation;
    let navOptions = {};

    if(state.index === 0){
        navOptions.headerRight = (
            <TouchableOpacity>
                <MaterialIcons
                    name="my-location"
                    size={32}
                    color="#fff"
                    style={{paddingRight: 10}} />
            </TouchableOpacity>
        )
    }

        if (state.isDrawerOpen){ …

在我的导航文件中，当我想切换抽屉时，出现以下错误：

类型错误：navigation.openDrawer 不是函数。（在 'navigation.openDrawer()' 中，'navigation.openDrawer' 未定义）

这是我的抽屉：

const DrawerNavigator = () => {
    return (
        <Drawer.Navigator
            initialRouteName="MYSHIFT"
        >
            <Drawer.Screen name="MYSHIFT" component={TopTabNavigator} />
        </Drawer.Navigator>
    )
}

这是我的容器导航：

const CareworkerNavigation = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>

                <Stack.Screen
                    name="Login"
                    component={LoginScreen}
                    options={{ headerShown: false }} />

                <Stack.Screen
                    name="Main"
                    options={({ navigation }) => {
                        return {
                            headerLeft: () => <Button title="LEFT BUTTON" onPress={() => {
                                navigation.toggleDrawer(); // <--- this line throws an error 
                            }} />
                        }
                    }}
                    component={DrawerNavigator} />

            </Stack.Navigator>
        </NavigationContainer>
    )
} …

我正在使用 React Native 和 React Native 导航。当我尝试访问 Route.params 时，它说它是一个未定义的对象。我可以使用 this.props.navigation.navigate 方法导航到 PokeDetails 屏幕，但我无法从 route.params.etc 获取参数......请参阅下面的代码。谢谢！

//Home.js

import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity, Image } from "react-native";
import { GlobalStyles } from "../styles/GlobalStyles";
import PokeDetails from "./PokeDetails";



class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: [],
        }
    }

    componentDidMount() {
        fetch(`https://pokeapi.co/api/v2/pokemon/?limit=20`)
            .then((res)=> res.json())
            .then((response)=> {
                this.setState({
                    isLoading: false,
                    dataSource: response.results,
                })
                console.log("RESPONSE",response)
                console.log("RESPONSE.RESSSULTS",response.results)
            })

    } …

我React Navigation 5在我的 React Native 应用程序中使用了 new 。

主菜单由RootNavigatora处理Drawer。登录/注册由AuthNavigationwhich处理Stack。

我试图在成功登录后将用户发送到Home屏幕RootNavigator。换句话说，我试图通过发出将用户发送到另一个导航器下的屏幕，navigation.navigate('RootNavigator', {screen: 'Home'});但我收到一个错误消息：

任何导航器都未处理负载为 {"name":"RootNavigator"} 的操作“NAVIGATE”。

你有一个名为“RootNavigator”的屏幕吗？

这是我的App.js样子：

const App = () => {

  const [isLoading, setIsLoading] = useState(true);
  const [isAuthenticatedUser, setIsAuthenticatedUser] = useState(false);

  useEffect( () => {

    // Check for valid auth_token here
    // If we have valid token, isLoading is set to FALSE and isAuthenticatedUser is set to TRUE
  });

  return …