React Native-导航问题“未定义不是对象（this.props.navigation.navigate）”

小编典典

React Native-导航问题“未定义不是对象（this.props.navigation.navigate）”

reactjs

我按照本教程 https://reactnavigation.org/docs/intro/的操作
，遇到了一些问题。

我每次都使用Expo Client应用程序而不是模拟器/模拟器来渲染我的应用程序。

我的代码如下所示。

我最初在“ ChatScreen”组件上方定义了“ SimpleApp” const，但这给了我以下错误：

路线“聊天”应声明一个屏幕。例如：…等

因此我将SimpleApp的权限移至“ AppRegistry”上方，这标志着一个新错误

元素类型无效：预期的字符串.....您可能忘记了导出组件..etc

本教程没有向任何组件添加关键字“导出默认值”，我认为这可能与im在Expo应用程序上运行它有关。所以我在“ HomeScreen”中添加了“ export
default”，错误消失了。

我似乎无法摆脱的新错误（基于下面的代码）如下：

未定义不是对象（评估“ this.props.navigation.navigate”）

除非删除“ const {navigate}”周围的“ {}”，否则我无法摆脱它，但是当我从主屏幕上按按钮时，这将破坏导航

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

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}



class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

阅读 182

2020-07-22

共1个答案

小编典典

使用Expo时，您不应该自己注册应用程序，而应该让Expo自己进行注册，请记住，您必须始终导出默认组件：此外，您还需要从react-
native导入View和Button：请在下面找到完整内容码：

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

 class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat', { user: 'Lucy' })}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

 class ChatScreen extends React.Component {
  // Nav options can be defined as a function of the screen's props:
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });
  render() {
    // The screen's current route is passed in to `props.navigation.state`:
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}

const  SimpleAppNavigator = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen }
});

const AppNavigation = () => (
  <SimpleAppNavigator  />
);

export default class App extends React.Component {
  render() {
    return (
        <AppNavigation/>
    );
  }
}

2020-07-22