How to resolve TypeError: Cannot read property 'scrollTo' of null(occurs because of native base tabs react native)?

Question

问题描述：

我正在研究 React Native 应用程序并使用“Native Base”选项卡结构。它抛出一个错误，并且在一段时间间隔后连续发生。

错误::

TypeError: Cannot read property 'scrollTo' of null

Unable to symbolicate stack trace: The stack is null

代码::

// class render function
    render() {
        const { showLoading } = this.props;
        return (
            <View style={[flex1]}>
                {(!showLoading) &&
                    <>
                        <Tabs renderTabBar={() => <ScrollableTab style={[styles.tabBar, bgWhite]} />}>
                            <Tab
                                heading="ComponentONE"
                                tabStyle={[tabStyle, bgWhite]}
                                activeTabStyle={[tabStyle, bgWhite]}
                                textStyle={[tabTextStyle, fs15, textGrey]}
                                activeTextStyle={[tabTextStyle, fs15, textPrimary]}
                            >
                                <ComponentONE key={this.props.key ? this.props.key : ''} />
                            </Tab>
                            <Tab
                                heading="ComponentTWO"
                                tabStyle={[tabStyle, bgWhite]}
                                activeTabStyle={[tabStyle, bgWhite]}
                                textStyle={[tabTextStyle, fs15, textGrey]}
                                activeTextStyle={[tabTextStyle, fs15, textPrimary]}
                            >
                                <ComponentTWO />
                            </Tab>
                            <Tab
                                heading="ComponentTHREE"
                                tabStyle={[tabStyle, bgWhite]}
                                activeTabStyle={[tabStyle, bgWhite]}
                                textStyle={[tabTextStyle, fs15, textGrey]}
                                activeTextStyle={[tabTextStyle, fs15, textPrimary]}
                            >
                                <ComponentTHREE/>
                            </Tab>
                        </Tabs>
                    </>
                }
            </View>
        );
    }

Answer 1

问题出在本机基础上，理想情况下他们声称已通过此拉取请求修复了它： geeky ants pull

基本上，如果您使用没有任何 scrollView 的 Tabs，它会抛出 scrollTo of undefined 错误，我建议尝试将整个 TAB 组件包含在 scrollView 中并检查它是否有效。

代码：

// class render function
    render() {
        const { showLoading } = this.props;
        return (
            <View style={[flex1]}>
                {(!showLoading) &&
                    <ScrollView>
                        <Tabs renderTabBar={() => <ScrollableTab style={[styles.tabBar, bgWhite]} />}>
                            <Tab
                                heading="ComponentONE"
                                tabStyle={[tabStyle, bgWhite]}
                                activeTabStyle={[tabStyle, bgWhite]}
                                textStyle={[tabTextStyle, fs15, textGrey]}
                                activeTextStyle={[tabTextStyle, fs15, textPrimary]}
                            >
                                <ComponentONE key={this.props.key ? this.props.key : ''} />
                            </Tab>
                            <Tab
                                heading="ComponentTWO"
                                tabStyle={[tabStyle, bgWhite]}
                                activeTabStyle={[tabStyle, bgWhite]}
                                textStyle={[tabTextStyle, fs15, textGrey]}
                                activeTextStyle={[tabTextStyle, fs15, textPrimary]}
                            >
                                <ComponentTWO />
                            </Tab>
                            <Tab
                                heading="ComponentTHREE"
                                tabStyle={[tabStyle, bgWhite]}
                                activeTabStyle={[tabStyle, bgWhite]}
                                textStyle={[tabTextStyle, fs15, textGrey]}
                                activeTextStyle={[tabTextStyle, fs15, textPrimary]}
                            >
                                <ComponentTHREE/>
                            </Tab>
                        </Tabs>
                    </ScrollView>
                }
            </View>
        );
    }

希望对您有所帮助。有疑问请随意。 coz 我将 Tabs 与本机基础的 scrollView 一起使用，并且效果很好。

Answer 2

如果您运行遇到这个问题，我遇到的另一个可能的问题是使用条件语句在 <Header hasTabs> 之后立即呈现 nativebase <Tabs>。如果条件的一部分实际上不包含 <Tabs> 元素，您将收到一条错误消息 TypeError: null is not an object (evaluating '_this.scrollView.scrollTo')

要解决此问题，请确保您的条件语句始终 returns 一个 <Tabs> 代码块以及该代码块中您想要的任何其他内容。

或者，确保您的 if 条件超出 <Header hasTabs> 代码块。

Answer 3

这已在 https://github.com/GeekyAnts/NativeBase/pull/2982 上修复。暂时安装最新的NativeBase master直到下个版本：

yarn add GeekyAnts/NativeBase#master

How to resolve TypeError: Cannot read property 'scrollTo' of null(occurs because of native base tabs react native)?

How to resolve TypeError: Cannot read property 'scrollTo' of null(occurs because of native base tabs react native)?

react-native

native-base