React native 反应本机选项卡导航器切换按钮剪贴画？

我有一个使用CreateBoottomTabNavigator创建的react原生选项卡导航器组件，请参见屏幕截图。 我尝试将最后一个图标作为切换按钮（使用press you toggle） 它的状态），但不执行任何应用程序路由（不更改活动 屏幕）。 这是可能的吗？或者如何实现？谢谢

---

我创建了一个小示例

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

=>这是

tabBarIcon

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

当

scan

tabe focused时，它会检查它是否聚焦，所以我在这里设置了活动图标，它是否聚焦

=>和我在

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> },
    }),

navigationOptions:（{navigation}）=>({
tabBarIcon:（{focused，tintColor}）=>{
const{routeName}=navigation.state；
让我来；
如果（routeName==‘列表’）{
iconName=聚焦？“活动图标”：“活动图标中”
}否则如果（routeName==='Setup'）{
iconName=聚焦？“活动图标”：“活动图标中”
}否则如果（routeName==='Scan'）{
iconName=聚焦？“活动图标”：“活动图标”
} 
回来
},
tabBarLabel:（{focused，tintColor}）=>{
const{routeName}=navigation.state；
让颜色=你的颜色；
让标签；
如果（routeName==‘列表’）{
lable=“列表”
}否则如果（routeName==='Setup'）{
lable=“设置”
}否则如果（routeName==='Scan'）{
lable=“扫描”
}
如果（聚焦| |路由名称==“扫描”）{
颜色=您的\u活动\u颜色
}
回来
{lable}
},
}),
花了很多时间尝试和阅读，但如果有人需要，我创建了一个解决方案。
这重用了导航参数和一个没有很好文档记录的tabBarOnPress方法（最近作为PR添加到react导航代码中）。
“geo”是用于突出显示选项卡按钮和存储信息的切换标志。

地理：{
屏幕：条形码屏幕，
导航选项：（{navigation}）=>({
tabBarOnPress:（{scene，jumpToIndex}）=>{
navigation.setParams（{geo:！navigation.getParam（“geo”，false）}）；
},
}})}
谢谢，这解决了基于状态的样式设置问题，但是，仍然存在一个问题，即选项卡不能用作路由元素，我只是没有屏幕来分配它，它的目的只是切换状态。很抱歉，我没有理解你的观点。请你通过显示gif或解释deeplyok来解释。选项卡导航器使用选项卡更改路线以导航屏幕。但是，我需要其中一个选项卡不更改屏幕，不更改路线，而只是充当切换按钮-打开/关闭标志。把它看作一个复选框。但它位于选项卡导航器中，与任何其他选项卡一样。