Question

我尝试在我的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

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

替换

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

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

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

Answer 2

您没有正确使用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);

undefined不是this.props的对象

2 个答案: