Не определено не является объектом React Native StackNavigator - PullRequest
Новая
       23

Не определено не является объектом React Native StackNavigator

0 голосов
/ 05 июня 2018

Я пытался заставить работать простое приложение-пример React Native StackNavigation, однако я продолжаю получать

TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')

Я не ожидаю, что приложение будет перемещаться где-либо на этом этапепросто разверните его с помощью панели приложения и некоторого произвольного текста. 

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

export default class App extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };

  render() {
    const { navigate } = this.props.navigation;
    return (
        <Text> Hello World </Text>
    );
  }
}

const appScreens = StackNavigator({
  Home: {screen: App},
})

AppRegistry.registerComponent('IntervalTimer', () => appScreens);

Ошибка сообщает об объявлении const { navigate } = this.props.navigation;.Удаление этой строки позволяет развернуть приложение, но без заголовка, как я и ожидал.

StackNavigator был установлен с помощью NPM и в настоящее время нормально импортируется в приложение.

Публикация похожих вопросов, и я попробовал их предложения.Благодарим Вас за любую помощь!

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

Если это просто то, что у опоры может быть шанс быть неопределенным, вы можете просто проверить неопределенность. 

const { navigate } = this.props.navigation || {};

Если предположить, что в какой-то момент navigation определено в рендере,быть безопасным в использовании.Вы можете попробовать зарегистрировать его и посмотреть, всегда ли оно не определено или определено в какой-то момент. 

console.log(navigate)

Вывод может быть ... 

undefined
undefined
//defined
0 голосов
/ 05 июня 2018

Вы можете добавить initialRouteName в опции StackNavigator.Попробуй это.

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

    class App extends React.Component {
      static navigationOptions = {
        title: 'Home',
      };

      render() {
        const { navigate } = this.props.navigation;
        return (
            <Text> Hello World </Text>
        );
      }
    }

    export const appScreens = StackNavigator({
      Home: { screen: App }
    },{
      initialRouteName: Home
    })

    AppRegistry.registerComponent('IntervalTimer', () => appScreens);
...