Question

undefined 不是对象 this.props

2017-07-13

2425

react-native

我尝试在我的 RN 应用中使用屏幕间导航。这是我的代码： INDEX.ANDROID.JS：

import React, { Component } from 'react';
import {
AppRegistry,
Text,
View ,
Button
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from './app/components/Todo';
const SimpleApp = StackNavigator({
Login: { screen: Todo },
});
export default class aap extends Component {
static navigationOptions = { title: 'Welcome', };
render() {
const { navigate } = this.props.navigation;
return (
<Button onPress ={() => navigate('Todo') } title="go"/>
);
}
}
AppRegistry.registerComponent('aap', () => aap);

这是第二个屏幕 TODO.JS 的代码

import React, { Component } from 'react';
import {
AppRegistry,
Text,
View ,
Button
} from 'react-native'; 
export default class Todo extends Component {
render() {
return (
 <View>
    <Text>
    Here is my text 
    </Text>
 </View>
);

}

运行我的代码时出现错误：undefined 不是对象 this.props.naviagtion。任何帮助都值得赞赏

Answer 1

您没有正确使用 StackNavigator 。正如 @xght 所说，您应该注册 SimpleApp 而不是 aap。此外，您应该使用 aap 作为 StackNavigator SimpleApp 的初始路由。这应该看起来像这样：

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View ,
  Button
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Todo from './app/components/Todo';

class aap extends Component {
  static navigationOptions = { title: 'Welcome', };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button onPress ={() => navigate('Todo') } title="go"/>
    );
  }
}

const SimpleApp = StackNavigator({
  Login: { screen: aap },
  Todo: { screen: Todo },
});

AppRegistry.registerComponent('aap', () => SimpleApp);

Answer 2

您注册了错误的组件，因此导航器 SimpleApp 不会将导航属性传递给您的组件。

将

AppRegistry.registerComponent('aap', () => aap); 替换为：

AppRegistry.registerComponent('aap', () => SimpleApp);

此外，您还忘记在 SimpleApp 路由中添加 aap 组件。并且您的 import Login from './app/components/Todo'; 是错误的：Login 是 SimpleApp 中路由的名称，Todo 是组件的名称，因此您需要将其替换为 import Todo...