React Native - 导航问题 "undefined is not an object (this.props.navigation.navigate)"

Question

我正在学习本教程 https://reactnavigation.org/docs/intro/，我运行遇到了一些问题。

我每次都使用 Expo Client 应用来呈现我的应用，而不是 simulator/emulator。

我的代码见下方。

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

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

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

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

教程没有将关键字 "export default" 添加到任何组件，我认为这可能与我在 Expo 应用程序上运行它有关？所以我将 "export default" 添加到 "HomeScreen" 并且错误消失了。

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

undefined is not an object (evaluating '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);

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

Answer 2

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

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

Answer 3

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

并且您可以像这样访问导航

//child.js

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

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

Answer 4

试试这个代码：onPress={() => this.props.navigation.navigate('Chat')}

Answer 5

正如 Bobur 在他的回答中所说，导航道具不会传递给路由组件的子组件。要让您的组件访问 navigation，您可以将其作为 prop 传递给它们，但还有更好的方法。

如果您不想在组件层次结构中一直传递 navigation 属性，您可以使用 useNavigation 代替。（在我看来，这无论如何都更干净，并且减少了我们必须编写的代码量）：

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}

https://reactnavigation.org/docs/use-navigation/

这真的很好，因为如果你有多个级别的组件，你将不必连续传递导航对象作为道具来使用它。只传递一次 navigation 需要我们 1. 向我们要传递它的组件添加一个 prop。 2.从父组件传递prop。 3. 使用 navigation 道具进行导航。有时我们必须重复步骤 1 和 2 才能将 prop 一直传递到需要使用 navigation 的组件。我们可以将第 1 步和第 2 步（无论重复多少次）压缩为使用此方法的单个 useNavigation 调用。

我认为最好。

Answer 6

navigation={props.navigation} {...data} />

这将使父导航传播到后续子导航。

React Native - 导航问题 "undefined is not an object (this.props.navigation.navigate)"

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

javascript

reactjs

react-native

expo