1

我在我的 expo 应用程序中ScrollableTab使用Native Base库。当我导航到此屏幕时，当我单击其中任何一个时，所有选项卡都会继续闪烁，因此它停止闪烁并正常工作，当我直接打开选项卡屏幕时，它也可以正常工作，但是当我从其他屏幕导航时，它的行为很奇怪（闪烁）。

<Container>
                <Appbar.Header theme={{ colors: { primary: '#b33f3f' } }}>
                    <Appbar.BackAction
                        onPress={() => this.props.navigation.goBack()}
                    />
                    <Appbar.Content
                        title="My Case Law"
                        subtitle="Case Details"
                    />
                </Appbar.Header>
                <Tabs renderTabBar={() => <ScrollableTab tabsContainerStyle={{ backgroundColor: '#b33f3f' }} />} tabBarUnderlineStyle={{ backgroundColor: '#fff' }}>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="Feather" name="activity" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>Activity History</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f', fontWeight: 'normal' }} activeTextStyle={{ fontWeight: 'normal' }} textStyle={{ color: '#fff' }}>
                        <Content>
                            <ActivityHistory />
                        </Content>
                    </Tab>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="Feather" name="users" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>Team Members</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f' }} textStyle={{ color: '#fff', }}>
                        <Content>
                            <TeamMembers />
                        </Content>
                    </Tab>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="MaterialCommunityIcons" name="file-document-box-multiple-outline" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>Documents</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f' }} textStyle={{ color: '#fff' }}>
                        <Content>
                            <Documents />
                        </Content>
                    </Tab>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="Entypo" name="documents" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>Notes</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f' }} textStyle={{ color: '#fff' }}>
                        <Content>
                            <Notes />
                        </Content>
                    </Tab>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="FontAwesome5" name="tasks" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>To-Dos</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f' }} textStyle={{ color: '#fff' }}>
                        <Content>
                            <Todos />
                        </Content>
                    </Tab>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="MaterialCommunityIcons" name="briefcase-search-outline" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>Related Cases</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f' }} textStyle={{ color: '#fff' }}>
                        <Content>
                            <RelatedCases />
                        </Content>
                    </Tab>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="MaterialCommunityIcons" name="timeline-text-outline" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>Time Sheet</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f' }} textStyle={{ color: '#fff' }}>
                        <Content><TimeSheet /></Content>
                    </Tab>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="Feather" name="bar-chart" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>Expenses</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f' }} textStyle={{ color: '#fff' }}>
                        <Content>
                            <Expenses />
                        </Content>
                    </Tab>
                    <Tab heading={<TabHeading style={{ backgroundColor: '#b33f3f' }}><Icon type="FontAwesome" name="money" style={{ color: '#fff', fontSize: 20 }} /><Text style={{ color: '#fff', fontSize: 14, fontWeight: 'normal' }}>Fee Received</Text></TabHeading>} tabStyle={{ backgroundColor: '#b33f3f' }} activeTabStyle={{ backgroundColor: '#b33f3f' }} textStyle={{ color: '#fff' }}>
                        <Content>
                            <FeedReceived />
                        </Content>
                    </Tab>
                </Tabs>
            </Container>
4

0 回答 0