React-native - undefined 不是函數（評估 navigation.openDrawer()'）

Question

我對 React Native 很陌生。 我將在這里分享我的代碼 App.js

import React, {Component} from 'react';
import Routes from './src/Routes';

export default class App extends Component {

  render() {
    return (
      <Routes />
    );
  }
}

索引.js

import React, { Component } from 'react';
import { AppRegistry, Dimensions } from 'react-native';
import { createDrawerNavigator } from 'react-navigation';
import App from './App';
import {name as appName} from './app.json';
import SideMenu from './src/SideMenu'
import Routes from './src/Routes';

const drawernav = createDrawerNavigator({
  Item1: {
      screen: Routes,
    }
  }, {
    contentComponent: SideMenu,
    drawerWidth: Dimensions.get('window').width - 120,  
});

AppRegistry.registerComponent(appName, () => drawernav);
AppRegistry.registerComponent(appName, () => App);

路由.js

import React, {Component} from 'react';
import { createStackNavigator, createAppContainer, createDrawerNavigator, DrawerActions } from 'react-navigation';
import Home from './Home';
import Settings from './Settings';
import SideMenu from './SideMenu';
import { Button, Platform, StyleSheet, Text, View, TouchableOpacity } from 'react-native';

const Nav = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: ({navigation}) => ({
      title: "Home",
      headerLeft:(<TouchableOpacity onPress={() => navigation.openDrawer()}>
                <Text >Button</Text>
              </TouchableOpacity>
   ),
  })
 },
  Settings: {
screen: Settings,
navigationOptions: ({navigation}) => ({
  title: "Settings",
})     
  },
});
const Routes = createAppContainer(Nav);
export default Routes;

SideNav.js

import PropTypes from 'prop-types';
import React, {Component} from 'react';
import styles from './SideMenu.style';
import {NavigationActions} from 'react-navigation';
import {ScrollView, Text, View} from 'react-native';
import Home from './Home';
import Settings from './Settings';

class SideMenu extends Component {
  navigateToScreen = (route) => () => {
    const navigateAction = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
  }

  render () {
    return (
      <View style={styles.container}>
        <ScrollView>
          <View>
            <Text style={styles.sectionHeadingStyle}>
              Section 1
            </Text>
            <View style={styles.navSectionStyle}>
              <Text style={styles.navItemStyle} onPress= 
   {this.navigateToScreen('Settings')}>
                  Page1
              </Text>
            </View>
          </View>
          <View>
            <Text style={styles.sectionHeadingStyle}>
              Section 2
            </Text>
            <View style={styles.navSectionStyle}>
              <Text style={styles.navItemStyle} onPress= 
   {this.navigateToScreen('Home')}>
                    Page2
              </Text>
              <Text style={styles.navItemStyle} onPress= 
   {this.navigateToScreen('Settings')}>
                    Page3
              </Text>
            </View>            
          </View>
          <View>
            <Text style={styles.sectionHeadingStyle}>
              Section 3
            </Text>
            <View style={styles.navSectionStyle}>
              <Text style={styles.navItemStyle} onPress= 
   {this.navigateToScreen('Settings')}>
                  Page4
              </Text>
            </View>
          </View>
        </ScrollView>
        <View style={styles.footerContainer}>
          <Text>This is my fixed footer</Text>
        </View>
      </View>
    );
  }
}

SideMenu.propTypes = {
  navigation: PropTypes.object
};

export default SideMenu;

主頁.js

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

export class Home extends Component {
  render() {
    return (
      <View >
        <Text>This is the home screen</Text>
        <Button onPress={() => this.props.navigation.navigate('Settings')} title="Settings"/>
      </View>
    )
  }
}

export default Home

當我單擊標題中的按鈕時，出現錯誤

undefined is not a function (evaluating navigation.openDrawer()')

我真的不想這樣做，但我現在真的很絕望。 我花了兩天時間試圖弄清楚如何制作側邊菜單，我對這個框架真的很失望。 你甚至不會花 5 分鍾在 Ionic 中創建一個側邊菜單。 請對此提供幫助。 項目可在 git https://github.com/yinka1255/react.git

Answer 1

錯誤

undefined is not a function (evaluating navigation.openDrawer()')

因為navigation道具沒有openDrawer方法而被拋出。 相反，您需要使用dispatch方法和DrawerActions幫助器：

import { DrawerActions } from 'react-navigation'
...
const Nav = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: ({navigation}) => ({
      title: "Home",
      headerLeft:(
        <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
          <Text>Button</Text>
        </TouchableOpacity>
      ),
    })
  },

DrawerActions具有三個方法 ，每個方法返回可調度的動作。 openDrawer ， closeDrawer和toggleDrawer ，它們將使Drawer狀態從打開切換到關閉，反之亦然。 希望有幫助！

Answer 2

不是框架，而是您。

您不需要將app.js用作虛擬組件，可以在app.js中直接使用相同的route.js代碼。 將導航器包裝在組件內部會帶來問題。

其次，您要使用appregistry兩次，您應該使用一次，它與App.js的對向是直接的，因為它沒有抽屜，並且根本不使用抽屜式導航，這就是為什么undefined不是函數，沒有抽屜。

index.js [第一個反應本機文件進入]

import { AppRegistry, Dimensions } from 'react-native';
import {name as appName} from './app.json';
import { createDrawerNavigator , createAppContainer } from 'react-navigation';
import SideMenu from './src/SideMenu'
import Routes from './src/Routes';

const drawernav = createDrawerNavigator({
  Item1: {
      screen: Routes,
    }
  }, {
    contentComponent: SideMenu,
    drawerWidth: Dimensions.get('window').width - 120,  
});

AppRegistry.registerComponent(appName, () => createAppContainer(drawernav));  //createAppContainer goes in your root navigator, in this case, a drawer

routes.js

import { createStackNavigator } from 'react-navigation';
import Home from './Home';
import Settings from './Settings';
import SideMenu from './SideMenu';
import { Button, Text, TouchableOpacity } from 'react-native';

const Nav = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: ({navigation}) => ({
      title: "Home",
      headerLeft:(<TouchableOpacity onPress={() => navigation.openDrawer()}>
                <Text >Button</Text>
              </TouchableOpacity>
   ),
  })
 },
  Settings: {
    screen: Settings,
    navigationOptions: ({navigation}) => ({
    title: "Settings",
  })     
  },
}); 

export default Nav;

另外，由於您僅在抽屜式導航器（路線）中顯示一個組件，因此您不應將屏幕嵌套在堆棧導航器中，只需將其傳遞給抽屜式導航器，抽屜式導航器便會在它們之間切換

const drawernav = createDrawerNavigator({
  Item1: {
      screen: Home,
      screen: Settings,
    }
  }, {
    contentComponent: SideMenu,
    drawerWidth: Dimensions.get('window').width - 120,  
});

Answer 3

undefined is not a function (evaluating navigation.openDrawer()')

DrawerActions from react-navigation不再可用。

使用import {DrawerActions} from '@react-navigation/native';

<TouchableOpacity
              onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
              style={{
                width: 60,
                height: 40,
                padding: 10,
                paddingLeft: 20,
              }}>
              <Icon
                size={20}
                name="bars"
                style={{marginLeft: 2}}
                color="#fff"
              />
</TouchableOpacity>