Question

我目前正在使用React导航v5。但是我无法通过此错误实现简单的导航：

TypeError：undefined不是对象（正在评估 'this._callListeners.bind'）

这是此仓库中的示例工作， 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是很新的。

Answer 1

在您的 App.js 中，将import 'package:flutter/material.dart'; import 'package:flutter_launch/flutter_launch.dart'; void main() => runApp(new MyApp()); class MyApp extends StatefulWidget { @override _MyAppState createState() => new _MyAppState(); } class _MyAppState extends State<MyApp> { @override initState() { super.initState(); } void whatsAppOpen() async { await FlutterLaunch.launchWathsApp(phone: "5534992016545", message: "Hello"); } @override Widget build(BuildContext context) { return new MaterialApp( home: new Scaffold( appBar: new AppBar( title: new Text('Plugin example app'), ), body: new Center( child: FlatButton( child: Text("Open WhatsApp"), onPressed: () { whatsAppOpen(); }, ) ), ), ); } }函数声明为胖箭头函数，如下所示：

var whatsappUrl ="whatsapp://send?phone=$phone";
await canLaunch(whatsappUrl)? launch(whatsappUrl):print("open whatsapp app link or do a snackbar with notification that there is no whatsapp installed");

我还注意到您正在使用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

Answer 2

对我来说，在babel.config.js中添加插件（例如装饰器，私有方法，类属性等）是一个问题。当我删除它们并运行expo start -c时，它现在又可以正常工作了。

Answer 3

当您将Babel配置更改为默认情况下React Native所使用的配置之外时，会发生此崩溃。

我的问题通过从babel.config.js中删除这些插件来解决

@ babel / plugin-proposal-decorators
@ babel / plugin-proposal-class-properties
@ babel / plugin-proposal-private-methods

Check this

Answer 4

使用 BaseNavigationContainer 而不是 NavigationContainer 为我解决了这个问题。

Answer 5

相同的错误，现在我要放弃本机，发展经验太糟糕了。

当this.props.navigation.navigate时，React-navigation v5（评估“ this._callListeners.bind”）

5 个答案: