Reactネイティブアプリのナビゲーション：最大呼び出しスタックサイズを超えました

Question

私は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; 

FIRSTPAGE：

は、

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; 

SecondPage：

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

React Nativeの公式ガイドに従って、組み込みのNavigatorコンポーネントを使用することをお勧めします。

Using Navigators React Native

私はそのエラーを見たことがないが、それはナビゲーションステップの多くの後に来る場合、あなたはresetTo機能を見てみる必要があります。ナビゲーションスタックがクリアされます。これは、たとえば、アプリのホーム画面に戻るときに意味があります。

Answer 2

そのライブラリを使用しないでください。彼らはGithubに1つのシングルスターを持っていません（それは図書館の価値の尺度ではなく、実証済みの図書館があります）。これまでに私が見つけた最も簡単で最も簡単なのは "反応ネイティブナビゲーション"（https://github.com/wix/react-native-navigation）です。 「反応するネイティブルータフラックス」も好きですが、私は個人的にそうしません。

申し訳ありませんが、今すぐコードを読む時間がありません。後で読むことがあります。しかし、今私の提案は、反応ネイティブナビゲーションを試みることです。それは真剣に驚くべきことです。