React native에서 선택한 탭에 테두리를 적용하는 방법?

선택한 탭의 테두리 2px를 적용 하시겠습니까? 나는 tabbar와 routings을 위해 react-native-router-flux 모듈을 사용하고있다. 이미지 위에React native에서 선택한 탭에 테두리를 적용하는 방법?

, 상기 어두운 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);

출처

2017-03-07 Juntae

사용 tabBarSelectedItemStyle

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

출처

2017-03-07 05:44:42 vinayr

당신은 저를 저장! – Juntae

내게 소주 !!!!! – vinayr

너 한국어! 볼 가치가 없다. 어디에서 살고 있니? 내가 살께! – Juntae

당신이 그것을 선택 때, 선을 보여주기 위해 바닥에 줄보기를 추가 라인을 보여줄 수 있도록, 선택된 표시하는 플래그를 사용할 수 있어야합니다 .

출처

2017-03-07 05:59:49 njafei

이 답변은 거의 의미가 없습니다. 나는 당신을 위해 그것을 다시 말하려고했으나, 나는 당신이 전하고자하는 것을 이해하고 있는지 확신하지 못합니다. 근처에 더 나은 영어로 답을 다시 쓸 수있는 사람이 있습니까? – Adrian

코드를 보여 주시고, 물론 당신이 이것을 원하지만, 생각이 더 좋습니다. 오 ~ 너는 로봇이야. 가능한 한 나를 대답 해. – njafei

당신은 몇 가지 방법이 ..

의 borderColor : "흰색", borderWidth : 2

특정하려면이 전체 국경을 위해 그것을 할, 또는됩니다

borderRightColor : "흰색", borderRightWidth : 2

borderLeftColor : "흰색" borderLeftWidth : 2

borderTopColor : "흰색" borderTopWidth : 2

borderBottomColor : "화이트" borderBottomWidth : 2

예는 여기에 있습니다 :

tabBarOptions : { activeTintColor : '흰색', activeBackgroundColor : '#의 e1e1e1', inactiveTintColor : '#의 b5b5b5', 라벨 스타일 : { fontSize는 10, }, 스타일 : { 의 backgroundColor : '#의 091d5a', 의 borderColor : "흰색", borderWidth는 2 } }

출처

2017-11-07 02:22:13 Clint

React native에서 선택한 탭에 테두리를 적용하는 방법?

답변

관련 문제