Я создаю приложение React Native, в котором у меня есть SwitchNavigator, который переводит меня либо в LoginStack, либо в Drawer (в зависимости от loginState, после входа в систему пользователь также достигает Drawer).
После входа пользователя в систему у меня есть требование, согласно которому в зависимости от данных пользователя, получаемых через логин (учетная запись и т. Д. c), я извлекаю проекты из этого account.
Мое требование - отобразить эти проекты в ящике NavBar . (У меня есть экран, который будет обслуживать навигацию, отображая детали выбранного проекта при щелчке объекта проекта в ящике. Который, опять же, выбирается через соответствующие API и т. Д.) Я также хочу, чтобы мой customComponent выхода из системы был очистить мое состояние, чтобы вход в другую учетную запись / пользователя не вызывал какого-либо дублирования в хранилище, которое происходит в настоящее время.
Следовательно, я хочу подключить декларацию Drawer к способу redux.
Я использую redux-thunk в качестве промежуточного программного обеспечения и ниже приведены соответствующие файлы кода.
AppNavigationView. 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 и я выбираю проекты, отправляя действие .
Но это только тот случай, когда пользователь уже вошел в систему
В случае, если мы пройдем вход по маршруту и затем перейдем к pocketNavigator, я ничего не понимаю .
Любая помощь заметна. Спасибо!