StackNavigator 通过 Component 给出未定义的错误 [英] StackNavigator through Component gives undefined error

问题描述

我试图使用 StackNavigator 进行导航，当我使用它从一个屏幕转到另一个屏幕时它可以正常工作，如解释

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

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

解决方案

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

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

返回(<查看><Text>你好，聊天应用程序！</Text><按钮onPress={() =>导航('聊天'，{用户:用户名})}title={"与" + 用户名聊天}/><测试导航={this.props.navigation}/></查看>);

第二个选项是，您可以使用 react-navigation 中的 withNavigation.您可以在此处

找到有关它的更多详细信息

import { Button } 'react-native';从反应导航"导入 { withNavigation };const MyComponent = ({ to, navigation }) =>(<按钮标题={`导航到 ${to}`} onPress={() =>navigation.navigate(to)}/>);const MyComponentWithNavigation = withNavigation(MyComponent)

<块引用>

带导航

withNavigation 是一个高阶组件，它通过navigation prop 进入包装的组件.当你的时候它很有用不能将 navigation 属性直接传递到组件中，或者不想在嵌套很深的孩子的情况下传递它.

I was trying to use StackNavigator for navigation and it works when I use it to go from one screen to the other as explained here. But when I try to have a subcomponent to navigate through itself, the navigation doesn't seem to work and I couldn't find any solution to it.

As given in the code below, I'm trying to use the Test Component in which there is a button that can be clicked to move from HomeScreen to ChatScreen.

I'm pretty sure the solution is something basic, but I really can't find it anywhere.

Here's my 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;
    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);

Here's the error I'm getting:

Here's the demo to test: https://snack.expo.io/HyaT8qYob

I hope my question is clear enough of what I mean.

解决方案

Since your Test component does not belong to navigation stack it doesn't have the navigation prop. You can do couple of things.

Simple one is to pass the navigation to the child component like the example below.

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

The second option is, you can use withNavigation from react-navigation. You can find more details about it 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 is a higher order component which passes the navigation prop into a wrapped component. It's useful when you cannot pass the navigation prop into the component directly, or don't want to pass it in case of a deeply nested child.

这篇关于StackNavigator 通过 Component 给出未定义的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！