如何将边框应用于 React native 中的选定选项卡？

Question

您有什么想法可以在所选选项卡的底部应用 2px 边框吗？我正在为标签栏和路由使用 react-native-router-flux 模块。

上图，已激活选定标签的 2px 深色边框。这就是我想要的。

以上其实是我做的。我可以激活条件图标颜色，但我不知道如何将边框应用于选定的选项卡。

你知道吗？

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';
import {Provider} from 'react-redux';
import {Scene, Router, Tabbar} from 'react-native-router-flux';
import TodoListComponent from './app/components/TodoListComponent';
import TabComponent1 from './app/components/TabComponent1';
import TabComponent2 from './app/components/TabComponent2';
import TabComponent3 from './app/components/TabComponent3';
import {Icon} from 'react-native-elements';
import {configureStore} from './app/store';


const TabIcon = ({ selected, title, iconName }) => {
    return (
        <View>
            <Icon
                name={iconName}
                color={selected? '#473332' : '#bdb8bc'}
                size={35}
            />
        </View>
    )
};


export default class AppComponent extends Component {
    render() {
        return (
            <Provider store={configureStore()}>
                <Router>
                    <Scene key="root">
                        <Scene key="todoList" tabs tabBarStyle={{ top: 72, height: 76, backgroundColor: '#f1f2f4', borderColor: '#e6e7e9', borderBottomWidth: 1}} initial>
                            <Scene key="list" title="First Tab" iconName="list" icon={TabIcon}>
                                <Scene key="scarlet" component={TabComponent1} hideNavBar initial />
                            </Scene>
                            <Scene key="alarm" title="Second Tab" iconName="alarm" icon={TabIcon}>
                                <Scene key="scarlet2" component={TabComponent2} hideNavBar initial />
                            </Scene>
                            <Scene key="settings" title="Third Tab" iconName="settings" icon={TabIcon}>
                                <Scene key="scarlet3" component={TabComponent3} hideNavBar initial />
                            </Scene>
                        </Scene>
                    </Scene>
                </Router>
            </Provider>
        );
    }
}


AppRegistry.registerComponent('AppComponent', () => AppComponent);

Answer 1

使用tabBarSelectedItemStyle

  tabBarSelectedItemStyle: {
    borderBottomWidth: 2,
    borderBottomColor: 'red',
  },

Answer 2

你必须用一个标志来标记哪个被选中，所以你可以在底部添加一个线视图来显示该线，当它被选中时，显示该线。

Answer 3

你有几个方法..

边框颜色: "white", 边框宽度：2

这将对整个边界执行此操作，或者如果您想要具体：

borderRightColor: "white", borderRightWidth: 2

左边框颜色："white" borderLeftWidth: 2

borderTopColor: "white" borderTopWidth: 2

边框底部颜色："white" borderBottomWidth: 2

这里有一个例子：

tabBar选项：{ activeTintColor: 'white', activeBackgroundColor: '#e1e1e1', inactiveTintColor: '#b5b5b5', 标签样式：{ 字体大小：10， }, 风格： { 背景颜色：'#091d5a'，边框颜色："white"，边框宽度：2 } }

如何将边框应用于 React native 中的选定选项卡？

How to apply border to selected tab in React native?

react-native

react-native-router-flux