react native ScrollabletabView组件 的默认图标问题

效果图:

image.png

导入ScrollabletabView组件:

import ScrollableTabView from "react-native-scrollable-tab-view";

自定义Customtab标签:

renderTabOption(tab, i) {
        let iconUp = this.props.activeTab == i ? this.props.selectedTabIconNamesUp[i - 1] : this.props.tabIconNamesUp[i - 1];
        let iconDown = this.props.activeTab == i ? this.props.selectedTabIconNamesDown[i - 1] : this.props.tabIconNamesDown[i - 1];
        console.log("tab:"+this.props.activeTab);
        return (
            <TouchableOpacity activeOpacity={0.7} onPress={() => this.props.goToPage(i)} key={i.toString()}>
                <Row justifyContent={"center"}>
                    <Text fontSize={16} color={ this.props.activeTab == i ? Colors.themeColor : Colors.blackColor }>
                        {this.props.tabNames[i]}
                    </Text>
                    <Column>
                        <IconBox justifyContent={"flex-end"} width={15} height={7}>
                            <Icon source={iconUp} width={8} height={5} />
                        </IconBox>
                        <IconBox justifyContent={"flex-end"} width={15} height={7}>
                            <Icon source={iconDown} width={8} height={5} />
                        </IconBox>
                    </Column>
                </Row>
            </TouchableOpacity>
        );
    }
render() {
        return (
            <ConsultTab>
                {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
            </ConsultTab>
        );
    }

使用ScrollabletabView组件

<Container>
                <Header navigation={navigation} goBack title={categorytitle} />
                <ScrollableTabView scrollWithoutAnimation={true} locked={true}
                    renderTabBar={() => (
                        <CustomTab tabNames={["按综合", "按价格", "按人气"]}
                            tabIconNamesUp={[
                                require("yyjieyou/assets/images/2x/top2x.png"),
                                require("yyjieyou/assets/images/2x/top2x.png")
                            ]}
                            tabIconNamesDown={[
                                require("yyjieyou/assets/images/2x/xia2x.png"),
                                require("yyjieyou/assets/images/2x/xia2x.png")
                            ]}
                            selectedTabIconNamesUp={[
                                require("yyjieyou/assets/images/2x/top12x.png"),
                                require("yyjieyou/assets/images/2x/top12x.png")
                            ]}
                            selectedTabIconNamesDown={[
                                require("yyjieyou/assets/images/2x/xia2x.png"),
                                require("yyjieyou/assets/images/2x/xia_2x.png")
                            ]}
                        />
                    )}
                >
                    <ComprehensiveTab tabLabel="按综合" />
                    <PriceTab tabLabel="按价格" />
                    <PopularityTab tabLabel="按人气" />
                </ScrollableTabView>
            </Container>

第一个tab不区分升降排序,所以升降序的图标[i-1],从第二个tab开始显示。

image.png

image.png

console.log("tab:"+this.props.activeTab);

tab每点击一次就刷一次,现在需要二次点击第二tab或第三tab时改为降序并改变图片默认值。

请问,有什么方法可以解决这个问题?欢迎大家热心解答

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容