来自@react-navigation/drawer 的自定义抽屉无法正常工作

Question

我正在构建需要自定义抽屉元素的应用程序。我希望能够突出显示当前选定的屏幕。我使用 Context 来保持当前屏幕的状态被选中并且它确实发生了变化。 changeDrawerElem 是在 Contex 中保留元素编号的函数，我看到它在 console.log 中更改了 onPress。但是，无论我试图控制它们，CustomDrawerContent 的元素都呈现为所有焦点。在文档中，据说属性 “focused” 应该采用布尔值并基于该突出显示的焦点元素。反应导航版本：5 任何帮助表示赞赏。

import React, { Component } from 'react';
import { useContext } from 'react';
import { Context } from '../context/settingContext';
import { StyleSheet, Text, View, ImageBackground, TouchableOpacity} from 'react-native';
import { DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';
import FontAwesome, { SolidIcons, RegularIcons, BrandIcons } from 'react-native-fontawesome';
import defaultStyles from '../css/defaultStyles';

function CustomDrawerContent (props){

    const {state} = useContext(Context);
    const {drawerElem} = state.find(elem => elem.hasOwnProperty('drawerElem'));
    const {changeDrawerElem} = useContext(Context);


    return(
        <DrawerContentScrollView {...props}>
            <DrawerItem
                label="Головна"
                onPress={() => {
                    changeDrawerElem(1);
                    props.navigation.navigate('StackNav', { screen: 'MainScreen'} )
                }}
                icon={() => <FontAwesome style={styles.drawerIcons} icon={SolidIcons.home} size={30} />}
                inactiveTintColor = "#000000"
                activeBackgroundColor = "#cdb9a5"
                focused = { () => drawerElem == 1 ? true : false}
             />
             <DrawerItem
                label="Зміст"
                onPress={() => {
                    changeDrawerElem(2);
                    props.navigation.navigate('StackNav', { screen: 'Content' });
                }}
                icon={() => <FontAwesome style={styles.drawerIcons} icon={SolidIcons.listOl} size={30} />}
                inactiveTintColor = "#000000"
                activeBackgroundColor = "#cdb9a5"
                focused = { () => drawerElem == 2 ? true : false}
              />
              
        </DrawerContentScrollView>
    );
}

const styles = StyleSheet.create(defaultStyles);

export default CustomDrawerContent;

Answer 1

我找到了解决我问题的答案，你需要将你的 focused props 更改为

focused={props.state.index ===  props.state.routes.findIndex(e => e.name === 'Головна')}

来自@react-navigation/drawer 的自定义抽屉无法正常工作

custom drawer focused from @react-navigation/drawer is not working correctly

react-native

react-native-navigation

react-navigation