React Navigation Drawer：动态路由和导航项目？ [英] React Navigation Drawer: Dynamically routes and navigation items?

问题描述

现在我遇到了问题..在我的应用程序安装之前，我从API获取类别。现在我希望有一个动态应用程序，它总是包含最新的数据。

Right now I am facing a problem.. Before my application gets mounted, I am fetching categories from an API. Now I want to have a dynamic app which always contains the newest data.

我希望不同的类别总是作为一个单独的屏幕。我需要的每个类别屏幕的功能始终相同。所以，我已经为自己构建了一个屏幕模板。

I want to have the different categories always as a separated screen. The functions I need for every category screen is always the same. So, I have build myself a screen template.

但是，我必须从API中获取不同的类别，然后导入我的模板屏幕，因为我已经获取了多次用于为每个类别创建屏幕的类别。此外，我需要将类别传递给模板屏幕，为每个类别设置一个正确的屏幕..

However, I have to fetch the different categories from the API and then import my template screen as many times as I have fetched categories to create a screen for each category. Furthermore, I need to pass the category to the template screen to set up a correct screen for each category..

这是否可行，你可以给我一个提示这样做？

Is this possible and can you give me a hint on how to do this?

亲切的问候和谢谢！

推荐答案

我知道您希望抽屉导航与从API接收的数据相关。在这种情况下，您应该仅在api调用后创建和呈现抽屉导航。

I understand that you want your drawer navigation to be dynamic in relation to the data received from the API. In that case, you should only create and render the drawer navigation after the api call.

获取类别后，迭代它们并构建你的路线配置。您应该能够覆盖 navigationOptions 并为每个屏幕手动设置一些参数（包含您的特定类别）。

After fetching the categories, iterate through them and build your route config. You should be able to override the navigationOptions and manually set some params (containing your specific category) for each screen.

let routeConfig = {};

categories.map(category => {
    routeConfig[category.key] = {
        screen: CategoryScreen, // your template screen, common to every item
        navigationOptions: (props) => {
            props.navigation.setParams({ category });
        }
    }
});

const DrawerNav = createDrawerNavigation(routeConfig, { /*options*/ });

然后你必须手动渲染抽屉导航组件

Then you'll have to render the drawer navigation component manually

render() {
    return (
        <DrawerNav screenProps={{}} />
    );
}

最后，在 CategoryScreen 或者您的屏幕组件是什么，您可以通过类似于clasic导航案例的方式访问该类别： this.props.navigation.state.params.category 。

Finally, within CategoryScreen or whatever your screen component is, you can access the category in a way similar to the clasic navigation case: this.props.navigation.state.params.category.

一些注释：

• DrawerNav 常数只是一个例子。很可能你会想要把它变成一个类属性或者在类之外定义但是在其中填充的普通变量。


• category.key 再次成为一个例子，您应该确保将其替换为每个类别的唯一内容，例如类别ID的字符串表示。


• 如果您想拥有每个类别的不同的屏幕组件，您只需根据当前中的类别将不同的组件传递到屏幕。 map（） iteration。

• The DrawerNav constant is just an example. Most probably you're going to want to make it a class property or a normal variable defined outside of the class but populated within.
• category.key is yet again an example, you should make sure to replace it with something unique for each category, such as a string representation of the category id.
• If you want to have different screen components for each category, you can simply pass a different component to screen based on the category in the current .map() iteration.

这篇关于React Navigation Drawer：动态路由和导航项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！