在 react-navigation 中动态更改 DrawerNavigator 的 drawerPosition 配置 [英] Dynamically change drawerPosition config of DrawerNavigator in react-navigation
问题描述
我的主要路线有一个 DrawerNavigator 配置
I have a DrawerNavigator config for my main routes
const App = DrawerNavigator(DrawerRoutes, {
initialRouteName: 'Main',
contentComponent: ({ navigation }) => <DrawerMenu navigation={navigation} routes={DrawerRoutes} />,
mode: Platform.OS === 'ios' ? 'modal' : 'card',
drawerWidth: Dimensions.get('window').width - (Platform.OS === 'android' ? 56 : 64),
drawerPosition: 'left',
})
我想根据应用程序的当前语言更改 drawerPosition 属性.我已经尝试连接到 redux 没有成功,因为它会为无效的 React 元素引发错误.如何动态更改 drawerNavigator 属性?
I want to change the drawerPosition property depending on the current language of the application. I have already tried to connect to redux with no success because it throws an error for invalid React element. How can I change the drawerNavigator properties on the fly?
推荐答案
我最终得到了一个不太优雅的解决方案.
I ended up with a not so elegant solution.
我复制了 react-navigation 的 DrawerNavigator 并将其添加到我的项目中.
I copied the DrawerNavigator of react-navigation and added it to my project.
无法正常工作的导入被修复为指向原始的 react-navigation 项目,我在 DrawerView 组件的 drawerPosition 属性上实现了应用程序逻辑
The imports that weren't working properly were fixed to point to the original react-navigation project and I implemented the application logic on the drawerPosition property on the DrawerView component
const Drawer = I18nReader()(
({ i18n, ...restProps }) =>
<DrawerView
{...restProps}
useNativeAnimations={useNativeAnimations}
drawerWidth={drawerWidth}
contentComponent={contentComponent}
contentOptions={contentOptions}
drawerPosition={i18n.rtl ? 'right' : 'left'}
/>
)
const navigator = createNavigator(
drawerRouter,
routeConfigs,
config,
NavigatorTypes.DRAWER
)(Drawer)
这篇关于在 react-navigation 中动态更改 DrawerNavigator 的 drawerPosition 配置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!