Навигация приложения в действии Реальный: максимальный размер стека вызовов превышен

Question

Я использую ReactNative для создания приложения iOS. Но я столкнулся с ошибкой, я не знаю, как ее исправить.

Я хотел создать кнопку для перехода к другой сцене. Я следил за Dark Army's tutorial на навигацию по RN и использовал 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 (не то, что это показатель ценности библиотеки, я просто говорю, что есть более проверенные библиотеки). Самый лучший и самый простой, который я нашел до сих пор, - «реагировать-родная-навигация» (https://github.com/wix/react-native-navigation). Многим людям нравится «реакция-родной-роутер-поток», но я лично этого не делаю.

Извините, у меня нет времени, чтобы прочитать код прямо сейчас, я могу позже. Но сейчас я предлагаю попробовать «реагировать-родной». Это серьезно удивительно.