反转选项卡导航器方向以支持 RTL 反应导航答案

【问题标题】：Reversing tab navigator direction to support RTL react navigation反转选项卡导航器方向以支持 RTL 反应导航
【发布时间】：2020-09-26 11:38:36
【问题描述】：

我一直在尝试将制表符方向更改为 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>

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

我猜你可以在 tabBarOptions 中更改样式：

<Tab.Navigator
    tabBarOptions={{
        style: {transform: [{scaleX: -1}]},
    }}> {Your}
</Tab.Navigator>

【讨论】：

scaleX: -1 在大多数情况下不起作用，它仅在您没有文本且图标对称时才起作用

【解决方案2】：

只需在 Tab Navigator 中反转您的 Tab 屏幕顺序。因此，将最后一个屏幕移动到第一个屏幕，然后...

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案3】：

您不能只是反向重新排列您的子组件吗？

【讨论】：