Question

我正在尝试使用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

我希望我的问题足够明确我的意思。

Answer 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道具传递给组件，或者   如果是深层嵌套的孩子，不要传递它。

StackNavigator到Component提供了未定义的错误

1 个答案: