[英]Show logged in user info in react-native drawerNavigator
I've been searching for a simple solution with best practices to have drawer that would show user's info, ie name, age, etc. The login will happen in a separate screen but after the login is done, somehow user info should be passed to drawerNavigator. 我一直在寻找一种具有最佳实践的简单解决方案,以使其具有显示用户信息(例如姓名,年龄等)的抽屉。登录将在单独的屏幕中进行,但登录完成后,应将用户信息以某种方式传递给drawerNavigator。 DrawerNav - StackNav - Screen1 - Screen2 - SettingsScreen (login will happen here) DrawerNav-StackNav-屏幕1-屏幕2-设置屏幕(登录将在此处进行)
It's really frustrating that I couldn't find a working solution yet. 我找不到有效的解决方案真是令人沮丧。 Expo code: https://snack.expo.io/@alisalimi25/user-info-drawer 博览会代码: https : //snack.expo.io/@alisalimi25/user-info-drawer
import React, { Component } from 'react';
import {
Button,
SafeAreaView,
ScrollView,
Text,
View
} from 'react-native';
import {
createDrawerNavigator, createStackNavigator,
DrawerItems, NavigationActions
} from 'react-navigation';
class Screen2 extends React.Component {
render() {
return(
<View><Text>Screen2</Text></View>
);
}
}
class Screen1 extends React.Component {
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<Text>Screen1</Text>
<Button
onPress={() => this.props.navigation.openDrawer()}
title='Open Drawer' />
</SafeAreaView>
);
}
}
class SettingScreen extends React.Component {
loginUser = () => {
console.log('We need to pass user info into drawer navigator');
};
render() {
return (
<SafeAreaView>
<Text>Settings Page</Text>
<Button
onPress={() => this.loginUser()}
title='Login' />
</SafeAreaView>
);
}
}
const StackNav = createStackNavigator(
{
Screen1: Screen1,
Screen2: Screen2
}
);
const CustomDrawerContentComponent = (props) => {
return (
<ScrollView>
<SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always', horizontal: 'never' }}>
<Text>Hello USER_NAME_FROM_PROPS?</Text>
<DrawerItems {...props} />
</SafeAreaView>
</ScrollView>
)
};
const DrawerNav = createDrawerNavigator(
{
StackNav: {
screen: StackNav,
},
SettingScreen: {
screen: SettingScreen
}
},
{
contentComponent: CustomDrawerContentComponent
}
);
export default DrawerNav;
I'm sure the solution is somewhere but I couldn't find it yet. 我确定解决方案在某个地方,但我还找不到。 Any help is highly appreciated. 非常感谢您的帮助。
Thanks 谢谢
So I managed to use screenProps to pass around parameters between pages but I'm not sure if it's a good pattern because it's like global variables and I think there is a chance of name collision between different layers of navigation. 因此,我设法使用screenProps在页面之间传递参数,但是我不确定这是否是一种好的模式,因为它就像全局变量一样,而且我认为导航的不同层之间可能会发生名称冲突。 The working code is: import React, { Component } from 'react'; 工作代码是:import React,来自'react'的{Component}; import { Button, SafeAreaView, ScrollView, Text, View } from 'react-native'; 从'react-native'导入{Button,SafeAreaView,ScrollView,Text,View};
import {
createDrawerNavigator, createStackNavigator,
DrawerItems, NavigationActions
} from 'react-navigation';
class Screen2 extends React.Component {
render() {
return(
<View><Text>Screen2</Text></View>
);
}
}
class Screen1 extends React.Component {
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<Text>Screen1</Text>
<Button
onPress={() => this.props.navigation.openDrawer()}
title='Open Drawer' />
</SafeAreaView>
);
}
}
class SettingScreen extends React.Component {
constructor(props) {
super(props);
console.log('passed props for settingScreen are: ', props);
}
loginUser = () => {
console.log('We need to pass user info into drawer navigator');
this.props.screenProps.userId = 'Gandalf';
};
render() {
return (
<SafeAreaView>
<Text>Settings Page</Text>
<Button
onPress={() => this.loginUser()}
title='Login' />
</SafeAreaView>
);
}
}
const StackNav = createStackNavigator(
{
Screen1: Screen1,
Screen2: Screen2
}
);
const CustomDrawerContentComponent = (props) => {
console.log('props in custom component are: ', props);
return (
<ScrollView>
<SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always', horizontal: 'never' }}>
<Text>Hello {props.screenProps.userId}</Text>
<DrawerItems {...props} />
</SafeAreaView>
</ScrollView>
)
};
const DrawerNav = createDrawerNavigator(
{
StackNav: {
screen: StackNav,
},
SettingScreen: {
screen: SettingScreen
}
},
{
contentComponent: CustomDrawerContentComponent
}
);
class DrawerNavWrapper extends React.Component {
constructor(props) {
super(props);
this.state = {
loggedInUser: {
}
};
}
render() {
return(
<DrawerNav screenProps={this.state.loggedInUser} />
);
}
}
export default DrawerNavWrapper;
After "Login" button is pressed in SettingScreen, screenProps is set this.props.screenProps.userId = 'Gandalf'; 在SettingScreen中按下“登录”按钮后,将设置screenProps this.props.screenProps.userId ='Gandalf'; and when you open drawer, "Hello Gandalf" will be shown. 当您打开抽屉时,将显示“ Hello Gandalf”。
The other solution is to use JS Modules. 另一种解决方案是使用JS模块。 Or maybe use react context ( https://github.com/react-navigation/react-navigation/issues/4511 ) 或者也许使用react上下文( https://github.com/react-navigation/react-navigation/issues/4511 )
Anyone knows a better solution? 有人知道更好的解决方案吗?
Thanks 谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.