react-native - undefined 不是函数(评估'_navigationactions2.default.reset')
问题描述
我是 react native 的新手,我只是遵循 react navigation 官方文档并尝试使用 DrawerNavigator 和 stackNavigator。当我从stackNavigator 的第二个屏幕访问drawerNavigator 时显示错误:未定义不是函数(正在评估'_navigationactions2.default.reset')。简单地说,我怎样才能从任何地方访问抽屉。
这是 App.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Button,
Image
} from 'react-native';
import {createStackNavigator, createDrawerNavigator} from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => {
/* 1. Navigate to the Details route with params */
this.props.navigation.navigate('Details', {
itemId: 86,
otherParam: 'anything you want here',
});
}}
/>
</View>
);
}
}
class DetailsScreen extends React.Component {
render() {
/* 2. Read the params from the navigation state */
const {params} = this.props.navigation.state;
const itemId = params ? params.itemId : null;
const otherParam = params ? params.otherParam : null;
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>Details Screen</Text>
<Text>itemId: {JSON.stringify(itemId)}</Text>
<Text>otherParam: {JSON.stringify(otherParam)}</Text>
<Button
title="Go to Details... again"
onPress={() => this.props.navigation.navigate('Details')}
/>
<Button
title="Go back"
onPress={() => this.props.navigation.goBack()}
/>
</View>
);
}
}
class MyHomeScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'DrawerHome',
drawerIcon: ({tintColor}) => (
<Image
source={require('./chats-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'Notifications',
drawerIcon: ({tintColor}) => (
<Image
source={require('./notif-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 24,
height: 24,
},
});
const RootStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
},
Details: {
screen: DetailsScreen,
},
}
);
const MyApp = createDrawerNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
Stack: {
screen: RootStack,
}
}
);
export default class App extends React.Component {
render() {
return <MyApp/>;
}
}
反应版本:16.3.1
反应原生版本:0.55.3
请帮我。
来自 AVD 的错误,android 版本:6.0 https://i.stack.imgur.com/WDTyY.png
解决方案
推荐阅读
- docker - Wiremock 容器在不重新启动的情况下不反映映射更改
- c# - 如何获得活动光标纹理?
- excel - 如何在表格中添加复选框以显示付款日期?
- php - 在使用之前检查用户是否拥有项目
- gcc - gcc - -ftest-coverage 是否将检测代码注入输出对象?
- php - PHP - 从表列到数组的值
- matrix - 将 UV 坐标从平面映射到网格上
- python - 返回动态 Python 类的整个嵌套生成的代码
- java - 从 Array Java 字符串中选择短语中的单词
- node.js - @prisma/client 尚未初始化。请运行“prisma generate”并尝试再次导入