Question

我有一个条件，我必须有条件地呈现选项卡，并且必须在屏幕顶部维护单个搜索组件，这对于所有3个选项卡的内容都是相同的。您可以查看this屏幕截图以获得更好的主意。输入文本将通过screenProps发送到所有选项卡，以便它们可以进行相应的过滤。

在屏幕组件render（）中，我有这个

return (
            <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>

                <View style={{ flex: 1, backgroundColor: 'white' }}>

                    {this.getStatusBar()}

                    <CustomSearchBar
                        onChangeText={this.setSearchPhrase}
                        onSubmitEditing={this.onSearchPress}
                        placeholder={I18n.t('searchEntities')} />

                    {this.getTabs()}

                </View>

            </SafeAreaView>
        );

这是我有条件地渲染选项卡的方式，

getTabs = () => {
        const { entityType } = this.props.parentEntity;

        if (entityType === appConstants.entityTypeEstate) {
            return (
                <EstateDrillDownTabs
                    screenProps={screenProps}
                    navigation={this.props.navigation} />);
        } else if (entityType === appConstants.entityTypeBuilding) {
            return (
                <BuildingDrillDownTabs
                    screenProps={screenProps}
                    navigation={this.props.navigation} />);
        } else if (entityType === appConstants.entityTypeRoom) {
            return (
                <RoomDrillDownTabs
                    screenProps={screenProps}
                    navigation={this.props.navigation} />);
        } else {
            if (__DEV__) console.error(`ERROR!`);
        }
    };

当然，这意味着我创建了3个标签导航器。

const EstateDrillDownTabs = createMaterialTopTabNavigator({
    Building: {
        screen: BuildingTab,
    },
    Site: {
        screen: SiteTab,
    },
    TechConst: {
        screen: TechConstTab,
    }
}, { ... });

const BuildingDrillDownTabs = createMaterialTopTabNavigator({
    Section: {
        screen: SectionTab,
    },
    Room: {
        screen: RoomTab,
    },
    Object: {
        screen: ObjectTab,
    }
}, { ... });

const RoomDrillDownTabs = createMaterialTopTabNavigator({
    Object: {
        screen: ObjectTab,
    }
}, { ... });

我的问题是从v1迁移到v3时发生的，我必须公开Class.router。

根据指南here，我将其公开如下。

static router = {
        ...EstateDrillDownTabs.router,
        getStateForAction: (action, lastState) => {
            return EstateDrillDownTabs.router.getStateForAction(action, lastState);
        },
    };

当满足EstateDrillDownTabs的条件时，此方法可以按预期正常运行，但其他情况显然会中断。如何有条件地设置静态路由器或以其他方式设置路由器以满足我的要求？

有条件地渲染TabNavigators

0 个答案: