我的应用程序使用react-navigation库进行路由,但是现在我有一个要求,我希望仅在属于TabNavigator的路由上显示模式窗口。我以为如果我创建了一个高阶组件并用它来包装TabNavigator,那会行得通的,但这似乎行不通。
那么将功能添加到反应导航导航器的正确方法是什么?
TabRoutes.js
在没有提供程序的情况下也可以正常工作,但是一旦将提供程序添加到TabNavigator中,路由就无法访问。
import myProvider from './providers/myProvider';
const TabRoutes = createBottomTabNavigator({
Main: {screen: HomeStack},
Moments: {screen: MomentStack},
Settings: {screen: SettingsRoutes}
},{
initialRouteName: 'Main'
});
export default myProvider(TabRoutes);
Routes.js
TabNavigator是SwitchNavigator的一部分,但是只有选项卡的路线应该能够显示模式。
import TabRoutes from './routes/TabRoutes';
const AppRoutes = createSwitchNavigator({
Loading: LoadingScreen,
Auth: AuthStack,
App: TabRoutes,
}, {
initialRouteName: 'Loading'
});
myProvider.js
const myProvider = (wrappedComponent) => {
class extends React.Component {
render (
<View>
<WrappedComponent {...this.props}>
<MyModal visible={...}>
... // rest of modal
</MyModal>
</View>
);
}
}
export default myProvider;
答案 0 :(得分:0)
未经测试,但是我接下来会尝试:
TabRoutes.js
import myProvider from './providers/myProvider';
const TabRoutes = createBottomTabNavigator({
Main: {screen: myProvider(HomeStack)},
Moments: {screen: myProvider(MomentStack)},
Settings: {screen: myProvider(SettingsRoutes)}
},{
initialRouteName: 'Main'
});
export default TabRoutes;
...肯定是要包装的屏幕组件,而不是整个TabRoutes
?