React Native - 导航问题“未定义不是对象(this.props.navigation.navigate)"

2022-01-23 00:00:00 reactjs javascript react-native expo

我正在关注本教程 https://reactnavigation.org/docs/intro/ 并且我正在运行有点问题.

Im following this tutorial https://reactnavigation.org/docs/intro/ and im running into a bit of issues.

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

Im using the Expo Client app to render my app every time and not a simulator/emulator.

我的代码如下所示.

我最初在ChatScreen"组件上方定义了SimpleApp"常量，但这给了我以下错误:

I originally had the "SimpleApp" const defined above "ChatScreen" component but that gave me the following error:

Route 'Chat' 应该声明一个屏幕.例如:...等

Route 'Chat' should declare a screen. For example: ...etc

所以我将 SimpleApp 的声明移到AppRegistry"上方，并标记了一个新错误

so I moved the decleration of SimpleApp to just above "AppRegistry" and that flagged a new error

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

Element type is invalid: expected string.....You likely forgot to export your component..etc

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

the tutorial did not add the key words "export default" to any component which I think it may have to do with the fact that im running it on the Expo app? so I added "export default" to "HomeScreen" and the error went away.

我似乎无法摆脱的新错误(基于下面的代码)如下:

The new error that I cant seem to get rid off(based on the code below) is the following:

undefined 不是一个对象(评估 'this.props.navigation.navigate')

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

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

I can't get rid of it unless I remove the "{}" around "const {navigate}" but that will break the navigation when I press on the button from the home screen

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);

推荐答案

使用 Expo，您不应该自己注册应用程序，而是应该让 Expo 来完成，请记住，您必须始终导出默认组件:您还需要从 react-native 导入 View 和 Button:请在下面找到完整代码:

With Expo you should't do the App registration your self instead you should let Expo do it, keeping in mind that you have to export default component always: Also you need to import View and Button from react-native: please find below the full code:

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/>
    );
  }
}

相关文章