React UI Kitten 样式标签栏答案

【问题标题】：React UI Kitten Styling TabBarsReact UI Kitten 样式标签栏
【发布时间】：2022-06-28 23:51:45
【问题描述】：

非常简单的问题和概念，我正在使用 React UI Kitten 框架来开发 React Native 项目，而在我的一生中，我无法更改 TabBar 的 Tab 组件的样式。我查看了文档，这就是它引导我的地方......

 <View style={LandingPageStyles.container}>
            <View style={LandingPageStyles.tabBarContainer}>
                <TabBar
                    indicatorStyle={{color: '#ffffff !important', borderColor: '#ffffff !important'}}
                    tabBarStyle={LandingPageStyles.loginTab}
                    style={LandingPageStyles.tabBar}
                    selectedIndex={selectedIndex}
                    onSelect={index => setSelectedIndex(index)}
                >
                    <Tab 
                        title="Login" 
                        tabBarStyle={LandingPageStyles.loginTab}
                        indicatorStyle={{color: '#ffffff !important', borderColor: '#ffffff !important'}}
                        tabBarStyle={LandingPageStyles.loginTab}/>
                    <Tab 
                        title='Sign Up' 
                        tabBarStyle={LandingPageStyles.signUpTab}
                        indicatorStyle={{color: '#ffffff !important', borderColor: '#ffffff !important'}}
                        tabBarStyle={LandingPageStyles.loginTab}/>
                </TabBar>
            </View>
            <View>
                {determineRender()}
            </View>
        </View>

我有以下样式表...

const LandingPageStyles = StyleSheet.create({
    container: {
        width: maxWidth,
        height: maxHeight,
    },
    tabBarContainer: {
        marginTop: maxHeight * 0.045,
        marginLeft: maxWidth * 0.075,
        marginBottom: maxHeight * 0.06,

        // borderWidth: 1,
        // borderColor: 'black',
        // width: maxWidth * 0.85,
    },
    tabBar: {
        backgroundColor: 'rgba(52, 52, 52, 0.3) !important',
    },
    loginTab: {
        borderBottomColor: "white",
        color: 'white',
    },
    signUpTab: {
        borderBottomColor: "white",
        color: 'white',
    }
})

请注意，我正在尝试以任何可能的方式设置标签本身的样式，在任何相关的地方添加 style tabBarStyle 和 indicatorStyle。不幸的是，它什么也没做，文本颜色仍然是一些褪色的蓝色/灰色而不是白色，并且所选选项卡的边框底部颜色只是蓝色。我是因为无法设置小猫元素的样式而倒霉还是我缺少什么？

【问题讨论】：

标签： react-native tabbar react-native-ui-kitten

【解决方案1】：

要更改 react native ui kitten 库中的某些样式，您需要使用称为 customize mappings 的东西。

您可以按照此处的指南进行操作：

【讨论】：

【解决方案2】：

tabview 样式非常有限，您的样式被忽略/覆盖。自定义组件映射非常麻烦，缺乏文档，而且您无法更改布局。您必须自己渲染组件才能完全控制样式

<TabView indicatorStyle={yourStyle} tabBarStyle={yourStyle}>
<Tab style={yourTabStyle}
    /* instead of passing the string, you pass the function to render the title */
    title={() => <Text style={yourTitleStyle}>Tab1</Text>}
    /* same for icon */
    icon={() => <Icon name='star' style={yourIconStyle}/>} 
>
</TabView>

【讨论】：