React nativeの選択したタブに枠線を適用するには？

Question

選択したタブの2px境界線を適用することをお考えですか？私はタブバとルーティングのための反応ネイティブルータフラックスモジュールを使用しています。画像の上

、ダークの2ピクセルの境界線は、選択したタブに活性化。これは私が欲しいものです。実際に私が行って何以上

。条件付きアイコンの色をアクティブにすることはできますが、選択したタブに枠線を適用する方法はわかりません。

あなたはこれについて考えていますか？

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： "白"、 borderWidth：2

これは全体のボーダーのためにそれを行うだろうか、具体的にしたい場合：

borderRightColor： "白"、 borderRightWidth：2

borderLeftColor： "白" borderLeftWidth：2

borderTopColor： "白" borderTopWidth：2

borderBottomColor： "白" borderBottomWidth：2

例はここにある：

tabBarOptions：{ activeTintColor： '白'、 activeBackgroundColor。 '＃1 e1e1e1' inactiveTintColor： '＃1 b5b5b5' labelStyle：{ のfontSize：10、 }、 スタイル：{ のbackgroundColor： '＃の091d5a'、 BORDERCOLOR： "白"、 borderWidth：2 }}