React native 如何解决TypeError:无法读取属性'；滚动至'；是否为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>
        );
    }

我正在开发react本机应用程序，并使用“本机基础”选项卡结构。它向我抛出一个错误，并在一段时间间隔后持续发生

错误：：

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

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

//类呈现函数
render（）{
const{showLoading}=this.props；
返回(
{（！正在加载）&&
}>
}
);
}

问题出在本机base上，理想情况下，他们声称已通过此pull请求解决了此问题：

基本上，如果您使用没有任何scrollView的选项卡，它会抛出一个scrollTo或undefined错误，我建议您尝试将整个选项卡组件封装在scrollView中，并检查它是否工作

代码：

//类呈现函数
render（）{
const{showLoading}=this.props；
返回(
{（！正在加载）&&
}>
}
);
}

---

希望能有帮助。不要怀疑。因为我使用了带有本地基础的滚动视图的选项卡，它工作得很好

如果遇到这个问题，我遇到的另一个可能的问题是在

之后立即使用条件语句呈现nativebase

时。如果条件的一部分实际上不包含

元素，则会出现一个错误，说明

TypeError:null不是对象（计算“\u this.scrollView.scrollTo”）

要解决此问题，请确保您的条件语句始终返回一个

代码块，其中包含您想要在该代码块中包含的任何其他内容

或者，确保您的if条件超出

代码块

这是固定的。暂时安装最新的NativeBase master，直到下一版本：

---

纱线添加极客/NativeBase#master

我最近使用了native base的可滚动标签，效果很好。我认为有什么东西（可能是加载状态）导致了这个问题，你能在这里编辑并粘贴完整的代码吗，因为这段代码很难观察到相同的情况。我使用了ScrollView，还尝试了在本机基础文件中添加代码，但这两个代码都不适用于Measter在添加ScrollView后，我遇到了新的错误：：

TypeError:null不是对象（计算“\u this.ScrollView.scrollTo”）

在

之间插入

没有帮助。修复程序由本地基本团队合并为master，但看起来尚未打包到npm。您可以使用

npm install GeekyAnts/NativeBase#master

来使用master branch，但不要忘记在修复后将其锁定到特定的packege版本@阿尔卡纳·夏尔马