React Native 0.69升级后Android屏幕阅读器仅选中底部标签文本未选图标

试试这几个方法，让图标和文本重新作为一个整体被屏幕阅读器选中：

1. 自定义标签栏按钮组件（最可靠） #

直接把图标和文本包裹在同一个可交互容器里，强制屏幕阅读器识别为单个元素：

import { TouchableOpacity, View, Text, Image } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

// 自定义标签按钮组件
const CustomTabButton = ({ children, onPress, accessibilityLabel }) => (
  <TouchableOpacity
    onPress={onPress}
    accessible={true}
    accessibilityLabel={accessibilityLabel}
    style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
  >
    {children}
  </TouchableOpacity>
);

// 导航器配置
<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarButton: (props) => (
      <CustomTabButton
        {...props}
        accessibilityLabel={route.name} // 用路由名作为统一的可访问标签
      />
    ),
    tabBarIcon: ({ focused }) => (
      <Image
        source={focused ? require('./assets/active-icon.png') : require('./assets/inactive-icon.png')}
        style={{ width:24, height:24 }}
        // 这里不需要单独加accessibilityLabel
      />
    ),
    tabBarLabel: ({ focused }) => (
      <Text style={{ color: focused ? '#007AFF' : '#8E8E93' }}>{route.name}</Text>
    ),
  })}
>
  <Tab.Screen name="首页" component={HomeScreen} />
  <Tab.Screen name="我的" component={ProfileScreen} />
</Tab.Navigator>

这样整个标签项会被屏幕阅读器当作一个可交互容器，读取你设置的accessibilityLabel，不用给图标单独加标签。

2. 用React Navigation内置的可访问性属性 #

检查你的React Navigation版本，试试在screenOptions里设置tabBarAccessibilityLabel，直接给整个标签项指定可访问标签：

<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarAccessibilityLabel: route.name,
    tabBarIcon: ({ focused }) => (
      <Image
        source={focused ? activeIcon : inactiveIcon}
        style={{ width:24, height:24 }}
      />
    ),
    tabBarLabel: ({ focused }) => (
      <Text>{route.name}</Text>
    ),
  })}
>
  {/* 你的屏幕组件 */}
</Tab.Navigator>

这个方法最省事，如果你的版本支持这个属性，直接就能解决问题。

3. 让屏幕阅读器忽略单独的图标 #

给图标设置accessibilityRole="none"，阻止屏幕阅读器单独识别它，这样就会默认把整个标签项作为可访问容器：

tabBarIcon: ({ focused }) => (
  <Image
    source={focused ? activeIcon : inactiveIcon}
    style={{ width:24, height:24 }}
    accessibilityRole="none"
  />
),

这个方法改动最小，不需要自定义组件，适合快速修复。

内容的提问来源于stack exchange，提问作者Shaon Ahmed