gpt4 book ai didi

react-native - 更改所选标签栏项目的底部边框颜色

转载 作者:行者123 更新时间:2023-12-04 09:10:06 33 4
gpt4 key购买 nike

我在 react-native 中有以下代码

import React, {Component} from 'react';
import {TabNavigator} from 'react-navigation';
import {View} from 'react-native';

class Home extends Component {

static navigationOptions = {
title:'Home',
tabBarLabel:'First'
};

render() {
return <View></View>;
}

}

const tabOptions = {

tabBarOptions: {
activeTintColor:'white',
inactiveTintColor:'#D3D3D3',
style:{
backgroundColor:'green',
borderTopWidth:1,
borderTopColor:'#D3D3D3'
},
tabBarSelectedItemStyle: {
borderBottomWidth: 2,
borderBottomColor: 'red',
},
},
}

const ProductNavigator = TabNavigator({
First: {screen: Home},
Second:{screen: Home}
},
tabOptions
);
export default ProductNavigator;

这是在 Android 模拟器中呈现时的样子

enter image description here

我希望黄色下划线改为红色下划线。但我对 tabBarSelectedItemStyle 的规则声明红色下划线的内容不被承认。如何使所选标签栏项目的下划线变为红色?

最佳答案

要设置 TabNavigator 所选项目的指示器的样式,您可以使用 indicatorStyle .

indicatorStyle - Style object for the tab indicator (line at the bottom of the tab).



示例
const tabOptions = {    
tabBarOptions: {
activeTintColor:'white',
inactiveTintColor:'#D3D3D3',
style:{
backgroundColor:'green',
borderTopWidth:1,
borderTopColor:'#D3D3D3'
},
indicatorStyle: {
backgroundColor: 'red',
},
},
}

const ProductNavigator = TabNavigator({
First: {screen: Home},
Second:{screen: Home}
}, tabOptions);

关于react-native - 更改所选标签栏项目的底部边框颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47024928/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com