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

【问题标题】：App navigation in React Native : maximum call stack size exceededReact Native 中的应用导航：超出最大调用堆栈大小
【发布时间】：2017-01-30 00:52:46
【问题描述】：

我正在使用 ReactNative 创建一个 iOS 应用。但是我遇到了一个我不知道如何解决的错误。

我想创建一个用于导航到另一个场景的按钮。我在 RN 导航上关注了Dark Army's tutorial，并使用了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;

【问题讨论】：

优秀的第一篇文章。很清晰，格式很好。做得好。如果您还没有看到该网站的2 Minute tour 看看。这里有很多整洁的事情要做。
谢谢！你们真棒。 :)
在我看来，正如@appsthatmatter 所建议的那样，您应该使用内置导航。看看他的回答。

标签： ios react-native atom-editor

【解决方案1】：

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

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

【讨论】：

我无法运行该程序。不知何故找不到 RCTBridge 文件。
嗯。您是否尝试登录 Facebook 并添加所需的库？这是尝试执行此操作时的常见错误。为了学习如何导航，我使用我想使用的 Navigator 库下载了一个示例应用程序。你可以在这里找到一个使用 react-native-navigation 的：github.com/wix/react-native-navigation/tree/master/example

【解决方案2】：

我建议按照 React Native 的官方指南，使用内置的Navigator 组件。

Using Navigators React Native

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

【讨论】：