react-native - 反应导航使用 redux 使用自定义组件定义抽屉导航
问题描述
我正在创建一个 React Native 应用程序,其中我有一个SwitchNavigator
将我带到一个LoginStack
或一个Drawer
(取决于 loginState,登录后用户也到达抽屉)。
将用户登录后,我有一个要求,其中根据通过登录名(帐户等)获取的用户详细信息,我从该帐户中获取项目。
我的要求是在 Drawer NavBar中显示这些项目。(我有一个适合导航的屏幕,在单击抽屉中的项目实体时显示所选项目的详细信息。这又是通过相关的 API 等获取的。)我还想让我的 customComponent 注销到清空我的状态,以便登录不同的帐户/用户不会导致当前正在发生的商店出现任何重叠。
因此,我想要一种将 Drawer 声明连接到 redux 的方法。
我使用 redux-thunk 作为我的中间件,下面是相关的代码文件。
应用导航视图.js
let DrawerNavigation = allProjects => {
return createDrawerNavigator(
{
Dashboard: {
screen: DashboardStack,
navigationOptions: ({ navigation }) => {
return {
drawerIcon: () => <Icon name="chart" fontSize={12} />,
};
},
},
Workspaces: {
screen: ProjectNavigator,
navigationOptions: {
// This is the title that displays in the side Drawer
title: 'Workspaces',
drawerIcon: () => <Icon name="home" fontSize={12} />,
},
},
MyProfile: {
screen: MyProfileStack,
navigationOptions: {
title: 'Profile',
drawerIcon: () => <Icon name="user" fontSize={12} />,
},
},
About: {
screen: AboutStack,
navigationOptions: {
drawerIcon: () => <Icon name="info" fontSize={12} />,
},
},
},
{
// let allProjectObjects = this.allProjects;
contentComponent: props => (
<View style={{ flex: 1 }}>
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
<DrawerItems {...props} />
<View
style={{ flexDirection: 'row', alignItems: 'center', paddingLeft: 25 }}
>
<Icon name="info" fontSize={12} />
<TouchableOpacity
onPress={() => handleLogoutClick(props)}
style={{ paddingLeft: 15 }}
>
<Text style={{ margin: 16, fontWeight: 'bold', color: 'black' }}>
Logout
</Text>
</TouchableOpacity>
</View>
// THIS SAFEAREAVIEW IS COMMENTED OUT, BUT I WANT TO DISPLAY MY
// PROJECTS FROM HERE!!
{/* <SafeAreaView>
<FlatList
data={this.allProjects}
renderItem={({ item }) => {
return (
<View
style={{
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 25,
}}
>
<Icon name="home" fontSize={12} />
<TouchableOpacity style={{ paddingLeft: 15 }}>
<Text
style={{
margin: 12,
color: 'black',
}}
>
{item.name}
</Text>
</TouchableOpacity>
</View>
);
}}
keyExtractor={item => item.id}
/>
</SafeAreaView> */}
</SafeAreaView>
</View>
),
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
},
);
};
export const createRootSwitchNavigator = (signedOut = false, allProjectObjects = {}) => {
return createSwitchNavigator(
{
SignedIn: {
screen: DrawerNavigation(allProjectObjects),
},
SignedOut: {
screen: Login,
},
},
{
initialRouteName: signedOut ? 'SignedOut' : 'SignedIn',
},
);
};
AppScreen.js(这称为Switch Navigator
)
render() {
if (this.state.isLoading || _.isEmpty(this.props.allProjectObjects)) {
return <SplashScreen />;
}
let Layout = createRootSwitchNavigator(
this.state.isSignedOut,
this.props.allProjectObjects,
);
let AppContainer = createAppContainer(Layout);
return <AppContainer />;
}
在这种情况下,我连接了 redux,并通过调度一个动作来获取项目。
但这只是用户已经登录的情况
如果我们采取登录路线然后导航到drawerNavigator,我一无所知。
任何帮助都是可观的。谢谢!
解决方案
推荐阅读
- scala - Scala List.combinations() 和/或 Set.subset() 的 Kotlin?
- parsing - 如何解析 Nom 中的大写字符串?
- ruby-on-rails - Ruby 2.6.1 和 Bundler 2.0.1 到 Heroku:我应该写一个 Procfile 吗?
- python - Numpy 布尔索引以匹配多个值
- sql - 需要建议。以下更改导致我的存储过程执行 5 分钟
- java - 如何读取 string.xml 文件中的 .txt?
- regex - sed - 从 pattern2 之前的 pattern1 删除到 pattern2 之后的 pattern3
- vue.js - 使用 vue 组件的构建版本时组件闪烁和消失(服务时没有问题)
- wordpress - 如何在 Storefront 的顶部栏和页脚区域添加自定义框架
- progressive-web-apps - 使用 @nuxt/pwa 清除缓存后,渐进式 Web 应用程序不起作用