反应原生选项卡导航器切换按钮snipples？答案

【问题标题】：react native tab navigator toggle button snipples?反应原生选项卡导航器切换按钮snipples？
【发布时间】：2023-03-12 03:25:01
【问题描述】：

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

【问题讨论】：

标签： react-native expo

【解决方案1】：

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

【讨论】：

【解决方案2】：

我创建了一个小例子。

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

=> 这是tabBarIcon里面的代码

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

当scantabe 聚焦时，它会检查它是否聚焦所以在这里我设置ACTIVE ICON 是否聚焦

=> 我在tabbarLael 做的一样

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

即使未选择scan 选项卡，通过比较屏幕名称设置ACTIVE COLOR

完整代码

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

【讨论】：

谢谢，这解决了基于状态的样式，但是，仍然存在选项卡不能用作路由元素的问题，我只是没有屏幕来分配它，它的目的是仅切换状态。
对不起，我没有明白你的意思，你可以通过显示 gif 或深入解释来解释
好的。选项卡导航器使用选项卡更改导航屏幕的路线。但是，我需要其中一个选项卡不更改屏幕，不更改路线，而只是充当切换按钮 - 打开/关闭标志。把它想象成一个复选框。但它位于标签导航器中，看起来与任何其他标签一样。