React Native navigation: undefined не является объектом

Я пытаюсь реализовать навигацию в React Native с реактивной навигацией в соответствии с этим, но при запуске приложения я столкнулся со следующей ошибкой:

undefined не является объектом (оценка this.props.navigation.navigate) render index.android.js: 17:12

Мой index.android.js:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native';
import {
  StackNavigator,
} from 'react-navigation';



export default class Abc extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Button
        title="Go to List"
        onPress={() =>
          navigate('Liste')
        }
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
export class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to List"
        onPress={() =>
          navigate('Profile')
        }
      />
    );
  }
}
export class Liste extends React.Component {
  static navigationOptions = {
    title: 'Liste',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Liste"
      />
    );
  }
}
const App = StackNavigator({
  Home: { screen: HomeScreen },
  Liste: { screen: Liste },
});
AppRegistry.registerComponent('Abc', () => Abc);

Есть ли у вас какие-либо предложения? Спасибо!


react-native react-native-android react-navigation
person frazer87    schedule 24.07.2017    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Я считаю, что вы хотели зарегистрировать компонент App в AppRegistry вместо компонента Abc.

Причина, по которой вы столкнулись с этим undefined is not an object (Evaluating 'this.props.navigation.navigate'), заключается в том, что props.navigation недоступен в вашем Abc компоненте. Если вы внимательно посмотрите на нижнюю часть своего кода, у вас есть:

const App = StackNavigator({
  Home: { screen: HomeScreen },
  Liste: { screen: Liste },
});

AppRegistry.registerComponent('Abc', () => Abc);

Итак, вы создали компонент StackNavigator, но не регистрируете этот компонент, а вместо этого регистрируете компонент Abc в AppRegistry, и, поскольку компонент Abc не находится ни на одном экране под вашим StackNavigator, у него не будет доступа к this.props.navigation таким образом, вы столкнетесь с исключением.

person dotcomXY    schedule 25.07.2017

arrow_upward
1
arrow_downward

У вас нет Profile экрана.
Если вы хотите перейти к Liste экрану из HomeScreen, используйте:

onPress={() => navigate('Liste')}

Если вы хотите перейти на экран Profile, вам нужно сделать Profile Screen и добавить его на StackNavigator, например:

export class Profile extends React.Component {
    static navigationOptions = {
        title: 'Profile',
    };
    render() {
        const { navigate } = this.props.navigation;
        return (
            <Button
                title="Profile"
            />
        );
    }
}
const App = StackNavigator({
    Home: { screen: HomeScreen },
    Liste: { screen: Liste },
    Profile: {screen: Profile},
});
person gaback    schedule 24.07.2017

arrow_upward
0
arrow_downward

почти 3 года с тех пор, как был задан первоначальный вопрос. У меня была такая же проблема, и я попал на эту страницу.

Реагировать-навигация теперь v5. Проблема, с которой я столкнулся, заключалась в том, что «навигация» не передавалась дочернему компоненту.

После небольшого дополнительного исследования я решил проблему, используя это решение отсюда.

Мне нужно передать реквизиты дочернему компоненту следующим образом.

<GoToButton navigation={props.navigation} />

https://reactnavigation.org/docs/connecting-navigation-prop

Надеюсь, это поможет таким новичкам, как я.

person lawphotog    schedule 21.04.2020