【发布时间】：2017-12-16 14:20:06
【问题描述】：
我正在将 'react-navigation' 的 DrawerNavigator 集成到我的项目中，作为 this 文档。但是当我运行该项目时，单击按钮时总是会出现此错误：
TypeError: undefined is not an object (评估 'this.props.navigation.navigate')
当我从左向右滑动时，什么也没有发生，抽屉也没有打开。
我检查了this.props，它总是在控制台中记录空{}。
我尝试了许多解决方案，但仍然无法正常工作。
calculator.js
export default class Calculator extends Component {
constructor(props) {
super(props);
}
static navigationOptions = {
drawerLabel: 'Calculator',
drawerIcon: ({ tintColor }) => (
<Image
source={require('./../../res/images/icon_calculator.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<View style={styles.container}>
<View>
<Text style={styles.title}>Tip Calculator</Text>
</View>
<Button
onPress={() => this.props.navigation.navigate("SettingsScreen")}
title="Go to settings"
/>
</View>
);
}
}
module.exports = Calculator;
settings.js
export default class Settings extends Component {
constructor(props) {
super(props);
}
static navigationOptions = {
drawerLabel: 'Settings',
drawerIcon: ({ tintColor }) => (
<Image
source={require('./../../res/images/icon_settings.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<View style={styles.container}>
<Text>Settings</Text>
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
</View>
);
}
}
module.exports = Settings;
navigation.js
import {
DrawerNavigator
} from 'react-navigation';
import Calculator from './../components/calculator/calculator.js';
import Settings from './../components/settings/settings.js';
const RootDrawer = DrawerNavigator({
CalculatorScreen: {
path: '/',
screen: Calculator
},
SettingsScreen: {
path: '/sent',
screen: Settings
}
}, {
initialRouteName: 'CalculatorScreen',
drawerPosition: 'left'
});
export default RootDrawer;
App.js
export default class App extends Component<{}> {
render() {
return (
<Calculator/>
);
}
}
index.js
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('rn_tip_calculator', () => App);
我必须将StackNavigator 与DrawerNavigator 一起使用，还是我错过了配置中的某些内容？
完整源码，只是一个简单的示例项目，请看：https://github.com/HCMUS-IceTeaViet-SE/rn_tip_calculator
任何帮助将不胜感激。谢谢！
【问题讨论】：
-
这是因为您没有“连接”或安装导航到应用程序。在它没有被传递到应用程序之前因为我相信我在这里找到了一个错字...github.com/HCMUS-IceTeaViet-SE/rn_tip_calculator/blob/master/… 你在第 25 行通过的导航器是小写的，不应该是大写的吗？
-
@GavinThomas 所以我必须更改 AppRegistry 以在 app.js 中注册我的 DrawerNavigator 而不是 App 组件？为什么？如果我同时注册它们会怎样？
-
您不能也不应该同时渲染它们。您应该渲染您的应用程序，然后将 RootDrawer 导入应用程序，然后将其传递给计算器。我明天一定会去看的！
标签： android react-native react-native-android react-navigation