0

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

正如下面的代码中给出的，我正在尝试使用测试组件，其中有一个可以单击以从 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

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

4

1 回答 1

3

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

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

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

第二个选项是，您可以使用withNavigationfrom react-navigation。您可以在此处找到有关它的更多详细信息

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是一个高阶组件，它将 navigationprop 传递到一个包装的组件中。当您无法将navigation道具直接传递到组件中时，它很有用，或者在嵌套深度嵌套的孩子的情况下不想传递它。

于 2017-09-27T22:08:57.983 回答