开发者问题收集

Undefined 不是对象 React Native StackNavigator

2018-06-04
1640
react-native react-native-navigation stack-navigator

我一直在尝试让一个简单的 React Native StackNavigation 示例应用运行，但是我一直收到

TypeError：未定义不是对象（评估“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 { navigation } = this.props.navigation; 声明上。删除此行确实允许应用部署，但没有我预期的标题。

StackNavigator 是使用 NPM 安装的，并且正在正常导入到应用中。

有类似的问题发布，我已经尝试了他们的建议。感谢您提供的任何帮助！

2个回答

您可以在 StackNavigator 的选项上添加 initialRouteName。试试这个。 

    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);
ridoansaleh
2018-06-05

如果这只是因为 prop 有可能未定义，那么您只需检查未定义即可。 

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

假设在某个时刻 navigation 在 render 中定义，则上述内容应该可以安全使用。您可以尝试记录它并查看它是否始终未定义或在某些时候被定义。 

console.log(navigate)

输出可能是... 

undefined
undefined
//defined
Dan
2018-06-05