StackNavigator 通过组件给出未定义的错误

Posted 2023-02-16

【中文标题】StackNavigator 通过组件给出未定义的错误

【英文标题】：StackNavigator through Component gives undefined error

【发布时间】：2018-03-09 12:31:48

【问题描述】：

我试图使用 StackNavigator 进行导航，当我使用它从一个屏幕转到另一个屏幕时它可以工作，如 here 所述。但是，当我尝试让子组件自行导航时，导航似乎不起作用，我找不到任何解决方案。

如下面的代码所示，我正在尝试使用测试组件，其中有一个按钮可以单击以从 HomeScreen 移动到 ChatScreen。

我很确定解决方案是基本的，但我真的无法在任何地方找到它。

这是我的代码：

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;
    let userName = 'Ketan';
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress=() => navigate('Chat',  user: userName )
          title="Chat with " + userName
        />
        <Test />
      </View>
    );
  


class ChatScreen extends React.Component 
  static navigationOptions = ( navigation ) => (
    title: `Chat with $navigation.state.params.user`,
  );
  render() 
    const  params  = this.props.navigation.state;
    return (
      <View>
        <Text>Chat with params.user</Text>
      </View>
    );
  


class Test extends React.Component 
  render() 
    const  navigate  = this.props.navigation;
    return (
      <View>
        <Button
          onPress=() => navigate('Chat',  user: 'TestBot' )
          title='This is a test'
        />
      </View>
    )
  


const NavApp = StackNavigator(
  Home:  screen: HomeScreen ,
  Chat:  screen: ChatScreen ,
);

AppRegistry.registerComponent('NavApp', () => NavApp);

这是我得到的错误：

这是要测试的演示：https://snack.expo.io/HyaT8qYob

我希望我的问题足够清楚我的意思。

【问题讨论】：

您需要将其传递给<Test />。检查这个答案***.com/questions/46269595/…

这个链接可以帮到你很多***.com/questions/52327643/…

【参考方案1】：

由于您的 Test 组件不属于导航堆栈，因此它没有导航道具。你可以做几件事。

简单的一种是将导航传递给子组件，如下例所示。

return (
  <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress=() => navigate('Chat',  user: userName )
          title="Chat with " + userName
        />
        <Test navigation=this.props.navigation />
      </View>
);

第二个选项是，您可以使用 react-navigation 中的withNavigation。你可以找到更多关于它的细节here

import  Button  'react-native';
import  withNavigation  from 'react-navigation';

const MyComponent = ( to, navigation ) => (
    <Button title=`navigate to $to` onPress=() => navigation.navigate(to) />
);

const MyComponentWithNavigation = withNavigation(MyComponent)

withNavigation

withNavigation 是一个高阶组件，它通过 navigation 支撑成一个包装的组件。它很有用，当你 不能将 navigation 属性直接传递给组件，或者 不想在嵌套很深的孩子的情况下传递它。