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

Question

我已经创建了一个带反应导航的抽屉系统（不使用 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。我只在 Android

上工作

Answer 1

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

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

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

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

call functions when the uer opens drawer (onClick button or slide)

android

navigation-drawer

react-native

react-navigation