Question

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

选择后如何在标签图标上方添加一行。我无法弄清楚，因为像padding这样的硬编码值会在不同的屏幕上产生不同的效果。这是我的代码：

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 }}
        />

上面的方法工作正常，但一旦选择后如何在每个标签图标上方添加一行。

Answer 1

您可以在图标上方添加一个视图，然后在选择状态为sth时将sth用作标志，然后将标记添加为true，然后添加到上面的行，否则将不会发生

如何在选项卡栏中的图标顶部添加一行反应本机

1 个答案: