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;

第一页：

    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

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

抱歉，我现在没有时间阅读这些代码，我可能会稍后。但我现在的建议是尝试使用react-native-navigation。这真是太棒了。

Answer 2

我建议您遵循React Native的官方指南并使用内置的Navigator组件。

Using Navigators React Native

我从未见过这个错误，但是如果它经过很多导航步骤后，你应该看一下resetTo函数。它将清除导航堆栈。例如，当您导航回应用程序的主屏幕时，这是有道理的。

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

2 个答案: