web-dev-qa-db-ja.com

選択したタブバー項目の下枠の色を変更します

反応ネイティブで次のコードがあります

import React, {Component} from 'react';
import {TabNavigator} from 'react-navigation';
import {View} from 'react-native';

class Home extends Component {

  static navigationOptions = {
        title:'Home',
        tabBarLabel:'First'
  };

  render() {
    return <View></View>;
  }

}

const tabOptions = {

    tabBarOptions: {
        activeTintColor:'white',
        inactiveTintColor:'#D3D3D3',
        style:{
            backgroundColor:'green',
            borderTopWidth:1,
            borderTopColor:'#D3D3D3'
        },
        tabBarSelectedItemStyle: {
            borderBottomWidth: 2,
            borderBottomColor: 'red',
        },
    },
}

const ProductNavigator = TabNavigator({
  First: {screen: Home},
  Second:{screen: Home}
},
tabOptions
);
export default ProductNavigator;

これは、Androidエミュレータでレンダリングすると、次のようになります。

enter image description here

代わりに黄色の下線を赤の下線にしたい。しかし、赤い下線を宣言するtabBarSelectedItemStyleに対する私のルールは認められていません。選択したタブバーアイテムの下線を赤くするにはどうすればよいですか

react-nativetabnavigator
7
John

TabNavigatorで選択したアイテムのインジケーターのスタイルを設定するには、 indicatorStyle を使用できます。

indicatorStyle-タブインジケーターのスタイルオブジェクト（タブの下部にある線）。

例

const tabOptions = {    
    tabBarOptions: {
        activeTintColor:'white',
        inactiveTintColor:'#D3D3D3',
        style:{
            backgroundColor:'green',
            borderTopWidth:1,
            borderTopColor:'#D3D3D3'
        },
        indicatorStyle: {
            backgroundColor: 'red',
        },
    },
}

const ProductNavigator = TabNavigator({
  First: {screen: Home},
  Second:{screen: Home}
}, tabOptions);
27
bennygenel