IOS 上的 React-native:无法调整超出可用视图的当前堆栈顶部

React-native on IOS: cannot adjust current top of stack beyond available views

在编写组件时,我的 IOS 模拟器突然出现一个非常奇怪的错误:"cannot adjust current top of stack beyond available views"

这是我的代码:

var Badge = require('./badge');
var Separator = require('./helpers/seperator');
var View = React.View;
var StyleSheet = React.StyleSheet;
var ScrollView = React.ScrollView;
var Text = React.Text;

var Profile = React.createClass({
    _getRowTitle: function (userInfo, item) {
        item = item.replace('_', ' ');
        return item[0] ? item[0].toUpperCase() + item.slice(1) : item;
    },

    render: function () {
        var userInfo = this.props.userInfo;
        var topicArr = ['followers', 'following', 'email', 'bio'];
        var list = topicArr.map((item, index) => {
                return (
                    <View key={index}>
                        <View>
                            <Text> {this._getRowTitle(userInfo, item)} </Text>
                            <Text> {userInfo[item]} </Text>
                        </View>
                        <Seperator />
                    </View>
                );
            }
        });

        return (
            <ScrollView style={styles.container}>
                <Badge userInfo={this.props.userInfo} />
                {list}
            </ScrollView>
        );
    }
});

有人知道这个错误是从哪里来的吗?

好的,事实证明,当您拼错组件名称时,会在 React-Native 中发生这种情况。我导入的 class、Separator 应该拼写为 Seperator 并且我的 linter 和构建系统没有发现错误。显然,如果您尝试使用 React-native 中未定义的对象,这就是您得到的错误!

扩展您所做的观察,每当您引用或拼错名称时,此错误就更普遍地发生。它不仅限于组件名称。

例如,如果您创建了一个 styles 对象来保存您的样式,但不小心将其引用为 style,那么您也会看到抛出此错误。