如何將邊框應用於React native中的選定選項卡？

您是否有任何想法應用選定選項卡的2px邊框底部？我正在使用react-native-router-flux模塊作爲tabbar和製程。如何將邊框應用於React native中的選定選項卡？

上圖中，黑暗的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);

來源

2017-03-07 Juntae

使用tabBarSelectedItemStyle

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

來源

2017-03-07 05:44:42 vinayr

你救了我！ – Juntae

buy me소주!!!!! – vinayr

你韓國人！很難看出，你住在哪裏？我要買！ – Juntae

你必須使用一個標誌來標記，是選擇，這樣你就可以在底部添加一行視圖來顯示行，當它的選擇，顯示行。

來源

2017-03-07 05:59:49 njafei

這個答案沒有什麼意義。我正在爲你改寫它，但我不確定我是否理解你想表達的內容。你有附近有人能幫助你用更好的英語來重寫你的答案嗎？ – Adrian

顯示我的代碼，當然你想這個，但我認爲思想比較好。哦〜你是一個機器人，如果可能的話回答我。 – njafei

你有一對夫婦的方式..

BORDERCOLOR：「白」，邊框寬度：2

這將做它爲整個邊界，或者如果你想具體：

borderRightColor：「白」， borderRightWidth：2

borderLeftColor：「白」 borderLeftWidth：2

borderTopColor：「白」 borderTopWidth：2

borderBottomColor：「白」 borderBottomWidth：2

一個例子是在這裏：

tabBarOptions：{ activeTintColor： '白'， activeBackgroundColor： '＃e1e1e1'， inactiveTintColor： '＃b5b5b5'， labelStyle：{ 字體：10， }，風格：{ 的backgroundColor： '＃091d5a'， BORDERCOLOR：「白」，邊框寬度：2 }}

來源

2017-11-07 02:22:13 Clint

如何將邊框應用於React native中的選定選項卡？

回答

相關問題