反应本机选项卡导航器切换按钮片段？

Question

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

Answer 1

我创建了一个小例子。

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

=> 这是里面的代码 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> },
    }),

Answer 2

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

反应本机选项卡导航器切换按钮片段？

react native tab navigator toggle button snipples?

react-native

expo