react-native:react-native-scrollable-tab-view抖动

Question

react-native:react-native-scrollable-tab-view抖动

精神微恙

024

发布于
2019-04-10

新手上路，请多包涵

问题描述

项目使用了react-native-scrollable-tab-view来实现tab栏位切换，发现在debug的时候内容会不停抖动(较大几率出现)，发布到正式生产环境目前还没有碰到过。

问题出现的环境背景及自己尝试过哪些方法

尝试发现，如果react-native-scrollable-tab-view中固定每一个标签页的宽度，就不会抖动（这个是通过反复加载来确认的），但由于标签页显示的文字是后台设置的，不能采用简单的固定每个标签页宽度来解决这个问题

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

            {/*顶部tabView滑动切换布局*/}
            {this.state.boardList.length > 0 ? (
                <View style={styles.tabBgStyle}>
                        <ScrollableTabView
                            ref={ref => {
                                this.scrollableTabView = ref;
                            }}
                            renderTabBar={() => <ScrollableTabBar style={styles.tabStyle}/>}
                            tabBarUnderlineStyle={styles.tabBarLine}
                            tabBarActiveTextColor={global.homeColor}
                            tabBarInactiveTextColor="#666666"
                            tabBarTextStyle={styles.tabBarTextStyle}
                            onChangeTab={(obj) =>this.handleChangeTab(obj)}
                        >
                            {this.state.boardList.map((v, i) => this.renderBoardItem(v, i))}
                        </ScrollableTabView>
                        <TouchableOpacity
                            onPress={() => {
                                NoDoublePress.onPress(() => {
                                    this.refs.modalRef.open();
                                })
                            }}
                            style={{
                                width: 40,
                                height: 46,
                                alignItems: "center",
                                justifyContent: "center",
                                backgroundColor: "#fff",
                                position: "absolute",
                                right: 0,
                                top: 0,
                                opacity: 0.8
                            }}
                        >
                            <Image source={Shape} style={{width: 17, height: 15}}/>
                        </TouchableOpacity>
                    <View style={{
                        backgroundColor: '#f3f4f5',
                        height: 1,
                        width: '100%',
                        position: 'absolute',
                        top: 46
                    }}>
                    </View>
                </View>
            ) : null}
           // 相关style
               tabBgStyle: {
    backgroundColor: '#ffffff',
    flex:1,
    flexDirection:'column',
    alignItems: 'center',
    justifyContent: 'flex-start',
},
tabStyle: {
    backgroundColor: '#ffffff',
    borderWidth: 0,
    width: '100%',
    height: 46,
    alignItems: 'center',
    justifyContent: 'center',
    paddingRight:40,// 安卓上直接设置width：width-40会出现左边有留白的问题，可以用paddingRight来设置右边
},

tabBarTextStyle: {
    width:'100%',// debug下测试如果宽度写死固定宽度，可以避免抖动的问题发生。
    flexDirection:'column',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize:setSpText(16),
},

tabBarLine: {
    width:0,
    height:0,
},