Question

您是否有任何想法应用所选标签的2px边框底部？我使用react-native-router-flux模块进行tabbar和路由。

上图，黑色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

你有两种方式..

borderColor：“white”， borderWidth：2

这将针对整个边界进行，或者如果您想要具体：

borderRightColor：“white”， borderRightWidth：2

borderLeftColor：“white” borderLeftWidth：2

borderTopColor：“white” borderTopWidth：2

borderBottomColor：“white” borderBottomWidth：2

这里有一个例子：

tabBarOptions：{ activeTintColor：'white'， activeBackgroundColor：'＃e1e1e1'， inactiveTintColor：'＃b5b5b5'， labelStyle：{ fontSize：10， }，风格：{ backgroundColor：'＃091d5a'， borderColor：“白色”， borderWidth：2 } }

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

3 个答案: