React-navigation v5 (оценивающая this._callListeners.bind), когда this.props.navigation.navigate - PullRequest
Новая
       55

React-navigation v5 (оценивающая this._callListeners.bind), когда this.props.navigation.navigate

0 голосов
/ 29 февраля 2020

В настоящее время я работаю с навигацией 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)

Вот код:

Приложение . 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 является совершенно новым.

Ответы [ 2 ]

0 голосов
/ 29 марта 2020

та же ошибка, теперь я хочу отказаться от реактивного, развить опыт так плохо.

0 голосов
/ 04 марта 2020

В вашем приложении. 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 >
...