如何在标签栏中的图标顶部添加一行反应原生答案

【问题标题】：How to add a line to the top of the icon in tab bar react native如何在标签栏中的图标顶部添加一行反应原生
【发布时间】：2018-08-16 22:05:11
【问题描述】：

我正在使用https://reactnavigation.org/docs/en/tab-based-navigation.html 来制作标签栏，到目前为止它工作正常。

选中后如何在选项卡图标顶部添加一行。我无法弄清楚，因为像填充之类的硬编码值会在不同的屏幕上产生不同的效果。这是我的代码：

navigationOptions: ({ navigation }) => ({
        tabBarIcon: props => (
            <Icon routeName={navigation.state.routeName} {...props} />
        )
    }),
    tabBarOptions: {
        activeTintColor:'blue',
        inactiveTintColor: "white",
        style: {
            backgroundColor:'grey'
        }
    }

我的图标组件是：

<Image source={focused ? require('icon.png') : require('icon-selected.png')} style={{ tintColor: focused ? 'blue' : 'white', padding: focused ? 0 : 4 }}
        />

除了如何在每个选项卡图标上方添加一行之外，上述工作正常。

【问题讨论】：

标签： reactjs react-native react-navigation styling

【解决方案1】：

您可以在图标上方添加一个视图，然后在selected标志变为true的状态下使用sth作为标志，然后添加到上面的线路没有任何事情发生了

【讨论】：