当 this.props.navigation.navigate 时,React-navigation v5(评估“this._callListeners.bind”)
2020-02-29
2043
我目前正在使用 React navigation v5。 但是我无法通过此错误实现简单的导航:
TypeError: undefined is not an object (evaluating 'this._callListeners.bind')
这是来自此 repo 的示例工作, https://github.com/SinghDigamber/reactNativeNavigation
此错误位于:
in Card (at CardContainer.tsx:154)
in CardContainer (at CardStack.tsx:518)
in RCTView (at CardStack.tsx:109)
in MaybeScreen (at CardStack.tsx:511)
in RCTView (at CardStack.tsx:92)
in MaybeScreenContainer (at CardStack.tsx:410)
in CardStack (at StackView.tsx:384)
in KeyboardManager (at StackView.tsx:382)
in RNCSafeAreaView (at src/index.tsx:28)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
in SafeAreaProviderCompat (at StackView.tsx:379)
in RCTView (at StackView.tsx:378)
in StackView (at createStackNavigator.tsx:67)
in StackNavigator (at App.js:15)
in NavStack (at App.js:50)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:267)
in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:39)
in ThemeProvider (at NavigationContainer.tsx:38)
in ForwardRef(NavigationContainer) (at App.js:49)
in App (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)
这是代码:
App.js
// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './screens/Home';
import Blog from './screens/Blog';
import BlogDetails from './screens/BlogDetails';
const Stack = createStackNavigator();
function NavStack() {
return (
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#621FF7',
},
headerTintColor: '#fff',
headerTitleStyle :{
fontWeight: 'bold',
},
}}
>
<Stack.Screen
name="Home"
component={Home}
options={{ title: 'Home' }}
/>
<Stack.Screen
name="Blog"
component={Blog}
options={{ title: 'Blog' }}
/>
<Stack.Screen
name="BlogDetails"
component={BlogDetails}
options={{ title: 'Blog Detail' }}
/>
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<NavStack />
</NavigationContainer>
);
}
console.disableYellowBox = true;
Home.js
// screens/Home.js
import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
class Home extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Blog"
onPress={() => this.props.navigation.navigate('Blog')}
/>
<Button
title="Go to Blog Details"
onPress={() => this.props.navigation.navigate('BlogDetails')}
/>
</View>
);
}
}
export default Home;
但是当按钮
onPress
时会发生错误。
我找不到有关此问题的任何解决方案,也许 v5 还很新。
3个回答
在您的
App.js
中将您的
NavStack()
函数声明为粗箭头函数,如下所示:
// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './screens/Home';
import Blog from './screens/Blog';
import BlogDetails from './screens/BlogDetails';
const Stack = createStackNavigator();
const NavStack = () => { // declare NavStack as fat arrow functions
return (
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#621FF7',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
>
<Stack.Screen
name="Home"
component={Home}
options={{ title: 'Home' }}
/>
<Stack.Screen
name="Blog"
component={Blog}
options={{ title: 'Blog' }}
/>
<Stack.Screen
name="BlogDetails"
component={BlogDetails}
options={{ title: 'Blog Detail' }}
/>
</Stack.Navigator>
);
}
export default App = () => { // declare App als as fat arrow functions
return (
<NavigationContainer>
<NavStack />
</NavigationContainer>
);
}
console.disableYellowBox = true;
此外,我注意到您正在使用
NavigationContainer
,您应该使用
NavigationNativeContainer
,如下所示:
// import from @react-navigation/native
import {NavigationNativeContainer} from '@react-navigation/native'; // import NavigationNativeContainer
现在更改:
<NavigationContainer>
<NavStack />
</NavigationContainer>
至
<NavigationNativeContainer >
<NavStack />
</NavigationNativeContainer >
Kishan Bharda
2020-03-04
对我来说,在 babel.config.js 中添加插件是一个问题,例如装饰器、私有方法、类属性等。当我删除它们并运行 expo start -c 时,一切又恢复正常了。
hadnet
2020-06-06
当您将 Babel 配置更改为 React Native 默认使用的内容以外的内容时,就会发生此崩溃。
通过从 babel.config.js 中删除这些插件,我的问题得到了解决
- @babel/plugin-proposal-decorators
- @babel/plugin-proposal-class-properties
- @babel/plugin-proposal-private-methods
Amin Motamedi
2020-12-02