React-Native StackNavigator

Question

好的，伙计们，我有一个问题，我是 react-native 开发的新手，并且遇到了 StackNavigator 的问题。当我按下一个用于导航当前屏幕的按钮时，它给了我一个像这样的错误： enter image description here

这是我正在使用的代码，我无法让它工作，

   static navigationOptions = {
     title: 'Welcome',
     };

    <Button
      onPress={() => navigate('News')}
      title="News"
    />

    const NewsApp = StackNavigator({
    Home: { screen: Splash },
    News: { screen: News }
    });

Answer 1

如果您确实尝试从创建它的组件中导航，您将无法访问导航器，因为它只会将导航注入到 NewsApp 中的任何内容。

您应该在导航堆栈的最顶层组件内处理后按。但是，如果您需要控制诸如您所拥有的地方的导航，那么实施 redux 可能对您来说是一个很好的解决方案。

Answer 2

在渲染函数中，你必须像这样提取导航器：

render()
{
  const { navigate } = this.props.navigation;
  return (
    <Button
      onPress={() => navigate('News')}
      title="News"
    />
  )
}

开始使用堆栈导航：

//First Screen

      import {
      StackNavigator,
    } from 'react-navigation';
//Added screens to navigate.    
    const BasicApp = StackNavigator({
      Main: {screen: MainScreen},
      Profile: {screen: ProfileScreen},
    });
//Second screen (Main Screen)
//This is a welcome screen which appears first in the route declared in the previous code
    class MainScreen extends React.Component {
      static navigationOptions = {
        title: 'Welcome',
      };
      render() {
      //constant for navigation 
        const { navigate } = this.props.navigation;
        return (
          <Button
            title="Go to Jane's profile"
            onPress={() =>
            navigate('Profile', { name: 'Jane' })//Navigate to Profile with name
            }
          />
        );
      }
    }

//Third screen (Profile screen)

    class ProfileScreen extends React.Component {
      static navigationOptions = ({navigation}) => ({
        title: navigation.state.params.name, //extracted name from the params
      });
      render() {
        const { goBack } = this.props.navigation;//used to goBack prop
        return (
          <Button
            title="Go back"
            onPress={() => goBack()} 
          />
        );
      }
    }

干杯:)