react-native - 如何解决 TypeError：无法读取 null 的属性“scrollTo”（由于本机基本选项卡反应本机而发生）？

Question

问题描述：

我正在处理本机应用程序并使用“本机基础”选项卡结构。它给我一个错误，并且在一段时间间隔后连续发生。

错误：：

TypeError：无法读取 null 的属性“scrollTo”

无法符号化堆栈跟踪：堆栈为空

代码：：

// 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>
        );
    }

标签： react-nativenative-base

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>
        );
    }

希望能帮助到你。随时怀疑。因为我使用了带有原生基础滚动视图的选项卡，它工作得很好。