React Native 中的应用程序导航：超出最大调用堆栈大小

Question

我正在使用 ReactNative 创建一个 iOS 应用程序。但是我遇到了一个错误，我不知道如何修复。

我想创建一个导航到另一个场景的按钮。我关注了Dark Army's tutorial on RN navigation and used the source code provided。我仔细检查了一切，一切似乎都很好。但是弹出我提到的错误。

这是我到目前为止完成的代码：

Index.ios.js:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
} from 'react-native';

var Navigation = require('./DARNNavigator');

class QayProject extends Component {

  render() {
    return (
      <Navigation></Navigation>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFF5E7',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('QayProject', () => QayProject);

DARNNavigator:

'use strict';

import React , {Component} from 'react';
import{
  View,
  Navigator
} from 'react-native';


const FirstPage = require('./FirstPage');
const SecondPage = require('./SecondPage');
class DARNNavigator extends React.Component{
  constructor(props) {
  super(props);
  }

  render() {
    var initialRouteID = 'first';
    return (
      <Navigator
        style={{flex:1}}
        initialRoute={{id: initialRouteID}}
        renderScene={this.navigatorRenderScene}/>
    );
  }

  navigatorRenderScene(route, navigator) {
    switch (route.id) {
      case 'first':
        return (<FirstPage navigator={navigator} route={route} title="FirstPage"/>);
      case 'second':
        return (<SecondPage navigator={navigator} route={route} title="SecondPage"/>);

    }
  }
}


module.exports = DARNNavigator;

首页：

    import React, { Component } from 'react';
    import{
      View,
      Navigator,
      Button,
      AppRegistry,
      StyleSheet
    } from 'react-native';

    export default class FirstPage extends Component {

      constructor(props) {
        super(props);
        this.state={ id:'first' }
      }
      render() {
        return (

        <View style={styles.container}>

        <Button
          onPress={this.props.navigator.push({ id:'second' })}
          title="Next"
          color="#FFB200"
        />

        </View>

        )
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });

    module.exports = FirstPage;

第二页：

import React, { Component } from 'react';
import {
  View,
  Text,
  Navigator,
  StyleSheet
} from 'react-native';

export default class SecondPage extends Component {

  constructor(props) {
    super(props);
  this.state={
    id:'second'
  }
}

  render() {
    return (
      <View style={styles.container}>
      <Text style={styles.title}>
      Hello!
      </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

module.exports = SecondPage;

Answer 1

不要使用那个库。他们甚至在 Github 上都没有一颗星（这并不是衡量图书馆价值的标准，我只是说有更多经过验证的图书馆可用）。到目前为止我发现的最好和最直接的是 "react-native-navigation" (https://github.com/wix/react-native-navigation)。很多人也喜欢 "react-native-router-flux"，但我个人不喜欢。

抱歉，我现在没有时间阅读代码，稍后再看。但我现在的建议是尝试 react-native-navigation。真是太棒了。

Answer 2

我建议按照 React Native 的官方指南使用 built-in Navigator 组件。

Using Navigators React Native

我从未见过该错误，但如果经过大量导航步骤后仍会出现该错误，您应该查看 resetTo 函数。它将清除导航堆栈。例如，当您导航回应用程序的主屏幕时，这是有意义的。

React Native 中的应用程序导航：超出最大调用堆栈大小

App navigation in React Native : maximum call stack size exceeded

ios

atom-editor

react-native