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

React Native - navigation issue "undefined is not an object (this.props.navigation.navigate)"

提问by user3676224

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

我正在关注本教程https://reactnavigation.org/docs/intro/并且遇到了一些问题。

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

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

my code is seen down below.

我的代码在下面看到。

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

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

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

路由“聊天”应该声明一个屏幕。例如：...等

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

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

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

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

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.

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

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

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

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

undefined 不是一个对象（评估'this.props.navigation.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

除非我删除“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);

回答by Ahmed Khaled Mohamed

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:

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

回答by Bobur Kobulov

Additional Info: When you are nesting child components, you need to pass navigation as prop in parent component. //parent.js <childcomponent navigation={this.props.navigation}/>

附加信息：当您嵌套子组件时，您需要在父组件中将导航作为 prop 传递。//父.js <childcomponent navigation={this.props.navigation}/>

And you can access navigation like this

你可以像这样访问导航

//child.js

//child.js

this.props.navigation.navigate('yourcomponent');

this.props.navigation.navigate('yourcomponent');

Reference: https://reactnavigation.org/docs/en/connecting-navigation-prop.html

参考：https: //reactnavigation.org/docs/en/connecting-navigation-prop.html

回答by aofeilin

const AppNavigation =()=>{  <SimpleApp  />}

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