React Native의 앱 탐색 기능 : 최대 호출 스택 크기를 초과했습니다.

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에 단 하나의 별조차 갖고 있지 않습니다 (도서관의 가치를 측정하는 것이 아니라, 입증 된 라이브러리가 더 많이 있다는 것을 말하는 것입니다). 지금까지 발견 한 가장 간단하고 직접적인 것은 "반응 네이티브 탐색"(https://github.com/wix/react-native-navigation)입니다. 많은 사람들이 "반응하는 네이티브 라우터 플럭스"를 좋아하지만 개인적으로는 그렇지 않습니다.

죄송합니다. 지금은 코드를 읽을 시간이 없습니다. 나중에 읽을 수 있습니다. 하지만 지금 내 제안은 반응 네이티브 - 네비게이션을 시도하는 것입니다. 정말 놀랍습니다.