Question

我有一个使用createBottomTabNavigator创建的react native选项卡导航器组件，请参见屏幕截图。我尝试将最后一个图标作为切换按钮（按下时切换状态），但不执行任何应用程序路由（不更改活动状态）屏幕）。这可能吗？谢谢

Answer 1

我创建了一个小例子。

在这里，我在选中和未选中的标签上自定义了图标和标签样式

=>这是tabBarIcon

中的代码

else if (routeName === 'Scan') {
              iconName = focused ? "ACTIVE_ICON" : "ACTIVE_ICON"
        }

当scan被聚焦时，它将检查其是否聚焦，因此在这里我将设置“活动图标”，以使其聚焦或不聚焦

=>我在tabbarLael

中所做的事情

  if (focused || routeName === "Scan") {
        color = YOUR_ACTIVE_COLOR
    }

即使未选择scan标签，通过比较屏幕名称设置的“活动颜色”

完整代码

 navigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, tintColor }) => {
            const { routeName } = navigation.state;
            let iconName;

            if (routeName === 'Lists') {
                iconName = focused ? "ACTIVE_ICON" : "IN_ACTIVE_ICON"
            } else if (routeName === 'Setup') {
                  iconName = focused ? "ACTIVE_ICON" : "IN_ACTIVE_ICON"
            } else if (routeName === 'Scan') {
                  iconName = focused ? "ACTIVE_ICON" : "ACTIVE_ICON"
            } 
            return <Image style={{
                height: 30,
                width: 30
            }}
                source={{
                    uri: iconName
                }}
                resizeMode="center"
            />
        },
        tabBarLabel: ({ focused, tintColor }) => {
            const { routeName } = navigation.state;
            let color = YOUR_INACTIVE_COLOR;

            let lable;

            if (routeName === 'Lists') {
                lable = "Lists"
            } else if (routeName === 'Setup') {
                lable = "Setup"
            } else if (routeName === 'Scan') {
                lable = "Scan"
            }

           if (focused || routeName === "Scan") {
                color = YOUR_ACTIVE_COLOR
            }





            return <Text style={{
                       fontSize: 9, 
                       textAlign: 'center', 
                       color: color }}>
                     {lable}
                   </Text> },
    }),

Answer 2

进行了大量的尝试和阅读，但是如果有人需要，我创建了一个解决方案。这重用了导航参数和一个没有很好记录的tabBarOnPress方法（最近作为PR添加到react导航代码中）。 “ geo”是用于突出显示选项卡按钮和存储信息的切换标志。 Geo: { screen: BarcodeScreen, navigationOptions: ({ navigation }) => ({ tabBarOnPress: ({ scene, jumpToIndex }) => { navigation.setParams({ geo: !navigation.getParam("geo", false)}); }, }})}

反应本机标签导航器切换按钮的片段？

2 个答案: