时间戳

首页 > 解决方案 > 当用户打开抽屉时调用函数（onClick 按钮或幻灯片）

android - 当用户打开抽屉时调用函数（onClick 按钮或幻灯片）

问题描述

我已经创建了一个带有 react-navigation 的抽屉系统（不使用 DrawerLayoutAndroid），我用一个按钮打开它或滑动它我想要的是当用户打开抽屉时调用函数并且我的函数将更改 UI 抽屉中的某些内容，它会检查是否有新消息设置新消息通知图标！这是抽屉导航代码：

const DrawerNavigation = createDrawerNavigator({
      Home: {
        screen: HomeStackNavigation,
      },
      Login: {
        screen: Login,
        navigationOptions: {
          header: null,
        }
      },
  },
  {
    drawerWidth: width*0.83,
    contentComponent: props =>
    {
      return(<DrawerComponent  {...props}/>)
    },
    drawerPosition: 'left',
  },
  );
export default createAppContainer(DrawerNavigation)

和抽屉布局代码它只是一个带有项目的滚动视图..

这是在主屏幕中打开和关闭抽屉的按钮代码：

  toggleButtonDrawer = () => {
    this.props.navigation.openDrawer();
  }

我在这里称它为：

  <View style={Styles.buttonMunuContainer}>
    <TouchableOpacity style={Styles.buttonMunu} onPress= {this.toggleButtonDrawer}>
    <IconAD name="menu-fold" size={ hp('4%')} color='white'/>
    </TouchableOpacity>
  </View>

PS。如果您知道我不使用 redux 时收到新消息时设置通知图标 (+1) 的另一种解决方案

PS。我只在安卓上工作

标签： androidreact-nativenavigation-drawerreact-navigation

解决方案

在您的自定义抽屉组件<DrawerComponent />中，您可以使用componentDidUpdate来检测抽屉何时打开。

componentDidUpdate(prevProps) {
  if (!prevProps.navigation.state.isDrawerOpen && this.props.navigation.state.isDrawerOpen) {
    console.log('The drawer has been opened!')
  }
}

所以你要做的就是在这个时候获取你的消息并与组件的当前状态进行比较，以检查是否有任何新的通知要显示。

推荐阅读