React Native自定义抽屉导航为所有菜单项添加右侧箭头图标

两种可行实现方式，按需选择即可： #

方案一：全局配置实现（改动最小，推荐） #

不需要修改自定义抽屉组件的渲染逻辑，直接在Drawer.Navigator的screenOptions中新增统一配置，所有注册的抽屉菜单项会自动带上尾部箭头，适配选中/未选中状态样式：

// 修改AppStack中的screenOptions配置
screenOptions={{
    drawerStyle: {
        width: wp('100'),
        height: hp('83.5'),
        borderTopRightRadius: 35,
        borderTopLeftRadius: 35,
        top: hp('4'),
    },
    headerShown: false,
    // 新增菜单项基础样式
    drawerItemStyle: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingHorizontal: 20,
        marginVertical: 6,
        borderRadius: 8
    },
    // 文字样式适配主题
    drawerLabelStyle: {
        fontSize: 16,
        fontFamily: 'lato',
        fontWeight: '500',
        marginLeft: -12,
    },
    // 选中/未选中颜色匹配现有紫色主题
    drawerActiveTintColor: '#5F488A',
    drawerInactiveTintColor: '#545455',
    // 统一渲染右侧>箭头
    drawerAccessoryRight: ({focused}) => (
        <Ionicons 
            name="chevron-forward" 
            size={20} 
            color={focused ? '#5F488A' : '#B5B5B5'} 
        />
    )
}}

注：该方案适用于@react-navigation/drawer v6及以上版本，低版本请使用方案二。 #

方案二：手动渲染菜单项（兼容所有版本，样式自由度高） #

如果使用的导航库版本不支持drawerAccessoryRight配置，可以替换默认的DrawerItemList，手动遍历路由渲染每个菜单项，自主控制所有样式细节：

1. 找到CustomDrawer组件中原本渲染默认菜单项的代码块：

   <View style={{ backgroundColor: 'white' }}>
       <DrawerItemList {...props} />
   </View>
   

2. 将其替换为手动遍历渲染的代码：

   <View style={{ backgroundColor: 'white', paddingHorizontal: 12 }}>
       {props.state.routes.map((route, index) => {
           const isFocused = props.state.index === index;
           const { drawerIcon, title } = props.descriptors[route.key].options;
   
           return (
               <TouchableOpacity
                   key={route.key}
                   onPress={() => props.navigation.navigate(route.name)}
                   style={{
                       flexDirection: 'row',
                       alignItems: 'center',
                       justifyContent: 'space-between',
                       paddingVertical: 14,
                       paddingHorizontal: 10,
                       borderRadius: 8,
                       backgroundColor: isFocused ? '#F3EFFA' : 'transparent',
                   }}
               >
                   {/* 左侧图标+标题区域 */}
                   <View style={{ flexDirection: 'row', alignItems: 'center', gap: 15 }}>
                       {drawerIcon?.({
                           focused: isFocused,
                           color: isFocused ? '#5F488A' : '#545455',
                           size: 26
                       })}
                       <Text style={{
                           fontSize: 16,
                           fontFamily: 'lato',
                           fontWeight: isFocused ? '700' : '400',
                           color: isFocused ? '#5F488A' : '#545455'
                       }}>
                           {title || route.name}
                       </Text>
                   </View>
                   {/* 右侧>箭头 */}
                   <Ionicons 
                       name="chevron-forward" 
                       size={20} 
                       color={isFocused ? '#5F488A' : '#B5B5B5'} 
                   />
               </TouchableOpacity>
           )
       })}
   </View>
   

配套调整说明 #

• 尾部箭头直接使用Ionicons的chevron-forward图标即可，和目标效果的>样式完全一致
• 你之前为Queries菜单写的drawerIcon包含多余的嵌套View和底部边框，会导致图标显示异常，修改为正常单图标即可：

  <Drawer.Screen name="Queries" component={Queries}
      options={{
          drawerIcon: () => <Ionicons name="timer-outline" size={26} />
      }}
  />
  

• 底部的Log Out按钮是自定义实现，只需要在文字后追加相同的chevron-forward图标，就能和其他菜单项样式保持统一。

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