React native 如何确定抽屉中的活动路径Vigator为活动菜单项着色并关闭抽屉_React Native_React Navigation_React Navigation Drawer

React native 如何确定抽屉中的活动路径Vigator为活动菜单项着色并关闭抽屉

react-native

React native 如何确定抽屉中的活动路径Vigator为活动菜单项着色并关闭抽屉,react-native,react-navigation,react-navigation-drawer,React Native,React Navigation,React Navigation Drawer,我正在使用反应导航库。我已经编写了一个自定义抽屉菜单，并将其添加到导航器的contentComponent配置中。我不知道如何从自定义菜单中确定哪个页面/屏幕处于活动状态。这是我的抽屉驱动程序代码： const DrawerNavigator = createDrawerNavigator({ "Search Locations": { screen: SearchLocationsScreen, }, "About": { screen:

我正在使用反应导航库。我已经编写了一个自定义抽屉菜单，并将其添加到导航器的contentComponent配置中。我不知道如何从自定义菜单中确定哪个页面/屏幕处于活动状态。这是我的抽屉驱动程序代码：

const DrawerNavigator = createDrawerNavigator({
    "Search Locations": {
        screen: SearchLocationsScreen,
    },
    "About": {
        screen: AboutScreen
    },
    "Favorites": {
        screen: FavoritesScreen
    },
    "Sign In": {
        screen: SignIn
    },
}, {
    contentComponent: props => <CustomDrawerComponent {...props} />
});

我的自定义抽屉菜单如下所示：

export default (navigation) => {
    const {state} = navigation;
    let navOptions = {};

    if(state.index === 0){
        navOptions.headerRight = (
            <TouchableOpacity>
                <MaterialIcons
                    name="my-location"
                    size={32}
                    color="#fff"
                    style={{paddingRight: 10}} />
            </TouchableOpacity>
        )
    }

        if (state.isDrawerOpen){
        navOptions.headerLeft = (
            <>
                <StatusBar barStyle='light-content'/>
                <TouchableOpacity onPress={() => {
                    navigation.dispatch(DrawerActions.toggleDrawer())
                }}>
                    <Ionicons name="ios-close" style={styles.menuClose} size={38} color={'#fff'}/>
                </TouchableOpacity>
            </>
        )
    } else {
        navOptions.headerLeft = (
            <>
                <StatusBar barStyle='light-content'/>
                <TouchableOpacity onPress={() => {
                    navigation.dispatch(DrawerActions.toggleDrawer())
                }}>
                    <Ionicons name="ios-menu" style={styles.menuOpen} size={32} color={'#fff'}/>
                </TouchableOpacity>
            </>
        )
    }

    return navOptions;
};

const MainStackNavigator = createStackNavigator({
    DrawerNavigator: {
        screen: DrawerNavigator,
        navigationOptions: ({navigation}) => configureDrawerOptions(navigation)
    }
}, {
    defaultNavigationOptions: configureDefaultStackNavOptions
});

const DrawerMenu = (props) => {

    // let routes = props.navigation.state.routes;

    const navigateToScreen = (route) => () => {

        const navAction = NavigationActions.navigate({
            routeName: route
        });
        props.navigation.dispatch(navAction);
    };

    return (
        <ScrollView style={styles.root}>

            <View style={styles.rowContainer}>
                <TouchableOpacity onPress={navigateToScreen('Search Locations')}>
                    <View style={styles.row}>
                        <MaterialIcons name='location-searching' style={styles.icon} size={30}/>
                        <Text style={styles.label}>Search Locations</Text>
                    </View>
                </TouchableOpacity>
            </View>

            <View {...props} style={styles.rowContainer}>
                <TouchableOpacity onPress={navigateToScreen('About')}>
                    <View style={styles.row}>
                        <MaterialIcons name='info-outline' style={styles.icon} size={30}/>
                        <Text style={styles.label}>About</Text>
                    </View>
                </TouchableOpacity>
            </View>

            <View {...props} style={styles.rowContainer}>
                <TouchableOpacity onPress={navigateToScreen('Favorites')}>
                    <View style={styles.row}>
                        <MaterialIcons name='favorite-border' style={styles.icon} size={30}/>
                        <Text style={styles.label}>Favorites</Text>
                    </View>
                </TouchableOpacity>
            </View>

            <View {...props} style={styles.rowContainer}>
                <TouchableOpacity onPress={navigateToScreen('Sign In')}>
                    <View style={styles.row}>
                        <Ionicons name='md-log-in' style={styles.icon} size={30}/>
                        <Text style={styles.label}>Sign In</Text>
                    </View>
                </TouchableOpacity>
            </View>

        </ScrollView>
    )
};

const-DrawerMenu=（道具）=>{
//let routes=props.navigation.state.routes；
const navigateToScreen=（路由）=>（）=>{
const navAction=NavigationActions.navigate({
路由名称：路由
});
道具.导航.调度（导航行动）；
};
返回(
搜索位置
关于
最爱
登录
)
};

如果选择不同的页面，我可以很好地导航（如果我在“搜索位置”页面，并且我想进入“登录”页面，一切正常）。但是，如果我在“搜索位置”页面上，单击“搜索位置”菜单项，我只想关闭抽屉。我还想给活动页面的图标/标签着色。我的问题是，在DrawerMenu.js文件中，我不知道如何确定我当前在哪个页面上执行此操作

我是否正确地实现了这一点？我是个新来的本地人。提前谢谢。

我想出了一个方法，但我想知道是否有比我想出的更好/更简单的方法。我添加了一些钩子（useffect、useState）并修改了navigateToScreen函数。这是我的密码。如果这对你有帮助，请投票表决。如果您提供了比我更好的解决方案，我会将其作为公认的答案：

const DrawerMenu = (props) => {

    let activeIndex = props.navigation.state.index;
    let activeRouteName = props.navigation.state.routes[activeIndex].routeName;

    const [activeRoute, setActiveRoute] = useState('');

    useEffect(() => {
        setActiveRoute(activeRouteName);
    }, [activeRouteName, activeRoute]);


    const navigateToScreen = (route) => () => {

        if (activeRouteName === route){
            return props.navigation.closeDrawer();
        }

        const navAction = NavigationActions.navigate({
            routeName: route
        });

        props.navigation.dispatch(navAction);
    };

    return (
        <ScrollView style={styles.root}>

            <View style={styles.rowContainer}>
                <TouchableOpacity
                    onPress={navigateToScreen('Search Locations')}>
                    <View style={styles.row}>
                        <MaterialIcons
                            name='location-searching'
                            style={activeRouteName === "Search Locations" ? styles.activeIcon : styles.icon}
                            size={30}
                        />
                        <Text style={activeRouteName === "Search Locations" ? styles.activeLabel : styles.label}>
                            Search Locations
                        </Text>
                    </View>
                </TouchableOpacity>
            </View>

            <View style={styles.rowContainer}>
                <TouchableOpacity onPress={navigateToScreen('About')}>
                    <View style={styles.row}>
                        <MaterialIcons
                            name='info-outline'
                            style={activeRouteName === "About" ? styles.activeIcon : styles.icon}
                            size={30}
                        />
                        <Text style={activeRouteName === "About" ? styles.activeLabel : styles.label}>
                            About
                        </Text>
                    </View>
                </TouchableOpacity>
            </View>

            <View style={styles.rowContainer}>
                <TouchableOpacity onPress={navigateToScreen('Favorites')}>
                    <View style={styles.row}>
                        <MaterialIcons
                            name='favorite-border'
                            style={activeRouteName === "Favorites" ? styles.activeIcon : styles.icon}
                            size={30}
                        />
                        <Text style={activeRouteName === "Favorites" ? styles.activeLabel : styles.label}>
                            Favorites
                        </Text>
                    </View>
                </TouchableOpacity>
            </View>

            <View style={styles.rowContainer}>
                <TouchableOpacity onPress={navigateToScreen('Profile')}>
                    <View style={styles.row}>
                        <MaterialIcons
                            name='person-outline'
                            style={activeRouteName === "Profile" ? styles.activeIcon : styles.icon}
                            size={32}
                        />
                        <Text style={activeRouteName === "Profile" ? styles.activeLabel : styles.label}>
                            User Profile
                        </Text>
                    </View>
                </TouchableOpacity>
            </View> 
        </ScrollView>
    )
};

const styles = StyleSheet.create({
    root: {
        marginTop: 20,
    },
    row: {
        flexDirection: 'row',
        paddingTop: 16,
        paddingBottom: 16,
        alignItems: 'center',
        justifyContent: 'flex-start'
    },
    icon: {
        marginRight: 25,
        color: '#fff',
        padding: 2,
    },
    activeIcon: {
        marginRight: 25,
        color: colors.accent,
        padding: 2,
    },
    label: {
        fontSize: 20,
        color: '#fff',
    },
    activeLabel: {
        fontSize: 20,
        color: colors.accent,
    },
    rowContainer: {
        marginHorizontal: 16,
    }

});

export default DrawerMenu;

const-DrawerMenu=（道具）=>{
让activeIndex=props.navigation.state.index；
让activeRouteName=props.navigation.state.routes[activeIndex].routeName；
const[activeRoute，setActiveRoute]=useState（“”）；
useffect（（）=>{
setActiveRoute（activeRouteName）；
}，[activeRouteName，activeRoute]）；
const navigateToScreen=（路由）=>（）=>{
如果（activeRouteName==路由）{
返回props.navigation.closeDrawer（）；
}
const navAction=NavigationActions.navigate({
路由名称：路由
});
道具.导航.调度（导航行动）；
};
返回(
搜索位置
关于
最爱
用户配置文件
)
};
const styles=StyleSheet.create({
根目录：{
玛金托普：20，
},
行：{
flexDirection:'行'，
paddingTop:16，
填充底部：16，
对齐项目：“居中”，
justifyContent:“灵活启动”
},
图标：{
marginRight:25，
颜色：“#fff”，
填充：2，
},
活动图标：{
marginRight:25，
颜色：颜色。重音，
填充：2，
},
标签：{
尺寸：20，
颜色：“#fff”，
},
活动标签：{
尺寸：20，
颜色：颜色。重音，
},
行容器：{
marginHorizontal:16，
}
});
导出默认抽屉菜单；

const DrawerMenu = (props) => {

    let activeIndex = props.navigation.state.index;
    let activeRouteName = props.navigation.state.routes[activeIndex].routeName;

    const [activeRoute, setActiveRoute] = useState('');

    useEffect(() => {
        setActiveRoute(activeRouteName);
    }, [activeRouteName, activeRoute]);


    const navigateToScreen = (route) => () => {

        if (activeRouteName === route){
            return props.navigation.closeDrawer();
        }

        const navAction = NavigationActions.navigate({
            routeName: route
        });

        props.navigation.dispatch(navAction);
    };

    return (
        <ScrollView style={styles.root}>

            <View style={styles.rowContainer}>
                <TouchableOpacity
                    onPress={navigateToScreen('Search Locations')}>
                    <View style={styles.row}>
                        <MaterialIcons
                            name='location-searching'
                            style={activeRouteName === "Search Locations" ? styles.activeIcon : styles.icon}
                            size={30}
                        />
                        <Text style={activeRouteName === "Search Locations" ? styles.activeLabel : styles.label}>
                            Search Locations
                        </Text>
                    </View>
                </TouchableOpacity>
            </View>

            <View style={styles.rowContainer}>
                <TouchableOpacity onPress={navigateToScreen('About')}>
                    <View style={styles.row}>
                        <MaterialIcons
                            name='info-outline'
                            style={activeRouteName === "About" ? styles.activeIcon : styles.icon}
                            size={30}
                        />
                        <Text style={activeRouteName === "About" ? styles.activeLabel : styles.label}>
                            About
                        </Text>
                    </View>
                </TouchableOpacity>
            </View>

            <View style={styles.rowContainer}>
                <TouchableOpacity onPress={navigateToScreen('Favorites')}>
                    <View style={styles.row}>
                        <MaterialIcons
                            name='favorite-border'
                            style={activeRouteName === "Favorites" ? styles.activeIcon : styles.icon}
                            size={30}
                        />
                        <Text style={activeRouteName === "Favorites" ? styles.activeLabel : styles.label}>
                            Favorites
                        </Text>
                    </View>
                </TouchableOpacity>
            </View>

            <View style={styles.rowContainer}>
                <TouchableOpacity onPress={navigateToScreen('Profile')}>
                    <View style={styles.row}>
                        <MaterialIcons
                            name='person-outline'
                            style={activeRouteName === "Profile" ? styles.activeIcon : styles.icon}
                            size={32}
                        />
                        <Text style={activeRouteName === "Profile" ? styles.activeLabel : styles.label}>
                            User Profile
                        </Text>
                    </View>
                </TouchableOpacity>
            </View> 
        </ScrollView>
    )
};

const styles = StyleSheet.create({
    root: {
        marginTop: 20,
    },
    row: {
        flexDirection: 'row',
        paddingTop: 16,
        paddingBottom: 16,
        alignItems: 'center',
        justifyContent: 'flex-start'
    },
    icon: {
        marginRight: 25,
        color: '#fff',
        padding: 2,
    },
    activeIcon: {
        marginRight: 25,
        color: colors.accent,
        padding: 2,
    },
    label: {
        fontSize: 20,
        color: '#fff',
    },
    activeLabel: {
        fontSize: 20,
        color: colors.accent,
    },
    rowContainer: {
        marginHorizontal: 16,
    }

});

export default DrawerMenu;

const-DrawerMenu=（道具）=>{
让activeIndex=props.navigation.state.index；
让activeRouteName=props.navigation.state.routes[activeIndex].routeName；
const[activeRoute，setActiveRoute]=useState（“”）；
useffect（（）=>{
setActiveRoute（activeRouteName）；
}，[activeRouteName，activeRoute]）；
const navigateToScreen=（路由）=>（）=>{
如果（activeRouteName==路由）{
返回props.navigation.closeDrawer（）；
}
const navAction=NavigationActions.navigate({
路由名称：路由
});
道具.导航.调度（导航行动）；
};
返回(
搜索位置
关于