[RN] React Native中使用 react-native-scrollable-tab-view嵌套在ScrollView里，导致子内容在安卓上无法显示...

蔚落 2021-10-26 14:48 407阅读 0赞

React Native中使用 react-native-scrollable-tab-view嵌套在ScrollView里，导致 子内容 在安卓上无法显示

#### 问题： ####

0.9.0 或 0.8.0 版本的`react-native-scrollable-tab-view`如果外层使用了一个ScrollView，在Android端上是无法显示的，iOS上显示无问题。

类似代码如下：

<ScrollView style={
        {flex: 1}}>
                    <ItemMoment navigation={
        this.props.navigation} item={item} showComment={
        false}/>
    
                    <View style={
        {height: 0.5, color: "#ccc", marginTop: 6, marginBottom: 6}}/>
    
                    <ScrollableTabView
                        tabBarPosition='top'
                        initialPage={
        0} //默认为第一页
                        locked={
        false} //表示手指是否能拖动视图，默认为false（表示可以拖动）。设为true的话，我们只能点击Tab来切换视图。
                        renderTabBar={() => <ScrollableTabBar/>}
                        tabBarUnderlineColor={
        'red'}
                        scrollWithoutAnimation={
        true}
    
                        tabBarBackgroundColor='#fff'
                        tabBarActiveTextColor='#2c2c2c'
                        tabBarInactiveTextColor='#666'
                    >
    
                        <CommentTab navigation={
        this.props.navigation} style={styles.textTab} tabLabel='评论(129)'/>
                        <CommentTab navigation={
        this.props.navigation} style={styles.textTab} tabLabel='转发(209)'/>
                        <CommentTab navigation={
        this.props.navigation} style={styles.textTab} tabLabel='赞(17)'/>
    
                    </ScrollableTabView>
    
                </ScrollView>

#### 解决办法： ####

查看源码后发现Android端使用的是`AnimatedViewPagerAndroid`，和iOS的实现有区别，可以把`react-native-scrollable-tab-view/index.js`中所有Android的判断给去掉，全部使用iOS的实现方式，即可解决此问题。

例如，注释掉 node\_modules/react-native-scrollable-tab-view/index.js 完后的代码如下：

其中，注释掉的代码 如图显示即可！

附注：

笔者在实践中发现，虽然这种修改确实可以让子内容显示，但同时又产生了另外一个bug，将导致 Tab 点击就报错了。

所以，笔者最终的设计，还是 取消  ScrollView  中嵌套 ScrollableTabView

本博客地址： [wukong1688][]

本文原文地址：[https://www.cnblogs.com/wukong1688/p/10904017.html][https_www.cnblogs.com_wukong1688_p_10904017.html]

转载请著名出处！谢谢~~

转载于:https://www.cnblogs.com/wukong1688/p/10904017.html

[wukong1688]: https://www.cnblogs.com/wukong1688/
[https_www.cnblogs.com_wukong1688_p_10904017.html]: https://www.cnblogs.com/wukong1688/p/10904017.html