Question

我一直试图将制表符方向更改为RTL而不是LTR。不幸的是，我无法找到它是如何工作的。我在tabBarStyle或样式道具中将flextDirection用作"row"或"row-reverse"，但是当我这样做时，整个标签都被删除了。仅当使用column或column-reverse显示在屏幕顶部或底部时才显示。这是我的代码：

const Tab = createMaterialBottomTabNavigator();

        <Tab.Navigator
            activeColor={theme.colors.text}
            inactiveColor={theme.colors.textAlt}
            barStyle={{
                backgroundColor: theme.colors.background,
                flexDirection: "row-reverse", //In this case an empty tab bar only appears with no screens. Screens only appear when it changes to column
            }}
            shifting={true}
            screenOptions={defaultNavOptions}>
            <Tab.Screen
                name={userConfig.appTexts.homeScreenName}
                component={AppNavigator}
                options={{
                    tabBarIcon: ({ color, size }) => {
                        return <Ionicons name="ios-home" color={color} size={22} />;
                    },
                }}
                initialParams={{ theme, taxonomy }}
            />
            <Tab.Screen
                name={userConfig.appTexts.settingScreenName}
                component={SettingNavigator}
                options={{
                    tabBarIcon: ({ color, size }) => {
                        return <Ionicons name="ios-settings" color={color} size={22} />;
                    },
                }}
                initialParams={{ theme }}
            />
            <Tab.Screen
                name={userConfig.appTexts.savedScreenName}
                component={PostNavigator}
                options={{
                    tabBarIcon: ({ color, size }) => {
                        return <Ionicons name="md-bookmark" color={color} size={22} />;
                    },
                }}
                initialParams={{ saved: true, theme }}
            />
        </Tab.Navigator>

Answer 1

我想您可以在tabBarOptions中更改样式：

_T

反转标签导航器方向以支持RTL反应导航

1 个答案: