我对 React Native 很陌生。我将在这里分享我的代码
应用程序.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);
路由.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 上可用
最佳答案
错误
undefined is not a function (evaluating navigation.openDrawer()')
被抛出是因为 the
navigation
prop does not have an openDrawer
method .相反,您需要使用 dispatch
方法和 DrawerActions
helper :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
这会将抽屉状态从打开切换到关闭,反之亦然。希望有帮助!
关于javascript - React-native - undefined 不是函数(评估 navigation.openDrawer()'),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54222472/