Question

我是React Native的新手。我要在这里分享我的代码 App.js

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

export default class App extends Component {

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

index.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);

Routes.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;

Home.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()')

因为the navigation prop does not have an openDrawer method被抛出

。相反，您需要使用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 has three methods表示每个返回可调度的动作。 openDrawer，closeDrawer和toggleDrawer，它们将使抽屉状态从打开切换到关闭，反之亦然。希望有帮助！

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,  
});

React-native-undefined不是一个函数（评估navigation.openDrawer（）'）

2 个答案: