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

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

正如下面的代码中所给出的，我正在尝试使用测试组件，其中有一个按钮可以点击从主屏幕移动到聊天屏幕

我很确定解决方案是基本的，但我真的在任何地方都找不到

这是我的密码：

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

从“React”导入React；
进口{
评估学，
文本，
看法
按钮
}从“反应本机”；
从“react navigation”导入{StackNavigator}；
类主屏幕扩展了React.Component{
静态导航选项={
标题:"欢迎",，
};
render（）{
const{navigate}=this.props.navigation；
让userName='Ketan'；
返回(
你好，聊天应用程序！
导航（'Chat'，{user:userName}）}
title={“与”+用户名聊天}
/>
);
}
}
类ChatScreen扩展了React.Component{
静态导航选项=（{navigation}）=>({
标题：`Chat with${navigation.state.params.user}`，
});
render（）{
const{params}=this.props.navigation.state；
返回(
与{params.user}聊天
);
}
}
类测试扩展了React.Component{
render（）{
const{navigate}=this.props.navigation；
返回(
导航（'Chat'，{user:'TestBot'}）}
title={'这是一个测试'}
/>
)
}
}
const NavApp=StackNavigator({
主屏幕：{屏幕：主屏幕}，
聊天：{screen:ChatScreen}，
});
AppRegistry.registerComponent（'NavApp'，（）=>NavApp）；

下面是我得到的错误：

下面是要测试的演示：

---

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

因为您的

测试组件不属于导航堆栈，所以它没有导航道具。你可以做两件事

简单的方法是将导航传递给子组件，如下面的示例所示

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

带导航功能

withNavigation
是通过
导航
将道具放入包装的组件中。当你
无法将
导航
道具直接传递到组件中，或者
如果是嵌套较深的子项，则不希望传递它

由于您的
测试
组件不属于导航堆栈，因此它没有导航属性。你可以做两件事

简单的方法是将导航传递给子组件，如下面的示例所示

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

带导航功能

withNavigation
是通过
导航
将道具放入包装的组件中。当你
无法将
导航
道具直接传递到组件中，或者
如果是嵌套较深的子项，则不希望传递它

您需要将其传递到
。检查此答案此链接可以帮助您将其传递给
。检查这个答案这个链接可以帮助你很多