react-native - 如何在带有 React Navigation 的 createBottomTabNavigator 中使用 AsyncStorage?
问题描述
我使用 react-navigation v3,我想在 createBottomTabNavigator 中使用 AsyncStorage 来检查用户是否登录。
我将密钥保存在 LoginScreen 中:
await AsyncStorage.setItem('@MyStorage:isLogged', isLogged);
我想在我的堆栈(TabStack)中使用 AsyncStorage:
const TabStack = createBottomTabNavigator(
{
Home: { screen: HomeScreen, },
// I need isLogged key from AsyncStorage here!
...(false ? {
Account: { screen: AccountScreen, }
} : {
Login: { screen: LoginScreen, }
}),
},
{
initialRouteName: 'Home',
}
);
我该怎么做?
我的环境:
- 反应原生:0.58.5
- 反应导航:3.3.2
解决方案
解决方法是:新建一个组件 AppTabBar 并在 tabBarComponent 属性中设置
const TabStack = createBottomTabNavigator({
Home: { screen: HomeScreen, },
Account: { screen: AccountScreen, }
},
{
initialRouteName: 'Home',
tabBarComponent: AppTabBar, // Here
});
和 AppTabBar 组件:
export default class AppTabBar extends Component {
constructor(props) {
super(props);
this.state = {
isLogged: '0',
};
}
componentDidMount() {
this._retrieveData();
}
_retrieveData = async () => {
try {
const value = await AsyncStorage.getItem('isLogged');
if (value !== null) {
this.setState({
isLogged: value,
});
}
} catch (error) {
// Error retrieving data
}
};
render() {
const { navigation, appState } = this.props;
const routes = navigation.state.routes;
const { isLogged } = this.state;
return (
<View style={styles.container}>
{routes.map((route, index) => {
if (isLogged === '1' && route.routeName === 'Login') {
return null;
}
if (isLogged === '0' && route.routeName === 'Account') {
return null;
}
return (
<View /> // here your tabbar component
);
})}
</View>
);
}
navigationHandler = name => {
const { navigation } = this.props;
navigation.navigate(name);
};
}
推荐阅读
- javascript - 禁用 Django 模型管理按钮(保存、删除等)
- python - 如何在 int 转换期间查看它是否不是 int
- email - 当 sendmail 转发电子邮件时,接收服务器有时会给出“服务不可用”
- c - 返回单个字符的数组
- c# - 如果 myStoryboard 尚未开始,则确定 Storyboard 是否处于活动状态?
- python - 使用注释#'s 作为装饰以获得更好的视觉识别 - 这是不好的做法吗?
- python - TensorFlow 初始化给出了所有的
- mysql - SSMS SQL - 将表中的一行与上一行进行比较 - 状态更改
- css - Safari - “输入搜索”导致视口向左推
- cas - CAS 5.3.1 和随机 404