如何手动在抽屉导航的底部添加额外的项目(例如注销按钮)?

问题描述

我想在我的RN应用程序的抽屉导航底部添加注销按钮.

I want to add logout button to the bottom of the drawer navigation in my RN app.

我正尝试通过以下方式使用contentComponent:

I am trying to use contentComponent the following way:

const DrawerWithLogoutButton = (props) => (
  <ScrollView>
    <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
      <DrawerItems {...props} />
    </SafeAreaView>
    <Button
      style={styles.logoutButton}
      title="Logout"
      onPress={() => props.navigation.navigate('Login') }/>
  </ScrollView>
);

export default Home = createDrawerNavigator({
  // screens
}, {
  // other settings
  contentComponent: DrawerWithLogoutButton,
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  logoutButton: {
    backgroundColor: 'red',
    position: 'absolute',
    bottom: 0
  }
});

结果是，我在菜单底部显示了注销"按钮.但我希望它位于抽屉面板的底部

In the result I have the Logout button at the bottom of the menu. But I want it to be located at the bottom of the drawer panel instead

我还希望注销"按钮看起来像其他菜单项并具有一个图标

Also I would want the Logout button to look like other menu items and had an icon

有没有一种方法可以创建带有菜单项的抽屉式导航器，而该菜单项没有屏幕，但是像我这样只是一个诸如注销之类的操作?

Is there a way to create drawer navigator with a menu item which has no screen but is just an action like Logout as in my case?

推荐答案

通过在ScrollView容器中添加justifyContent: 'space-between'，我能够使抽屉式菜单底部的Logout对齐.您可以在图片中看到结果

I was able to align Logout at the bottom of the drawer menu with adding justifyContent: 'space-between' to the ScrollView container. You can see the result in the picture

结果源代码如下所示:

const DrawerWithLogoutButton = (props) => (
  <ScrollView contentContainerStyle={{flex: 1,  flexDirection: 'column', justifyContent: 'space-between' }}>
    <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
      <DrawerItems {...props} />
    </SafeAreaView>
    <TouchableOpacity>
      <View style={styles.item}>
        <View style={styles.iconContainer}>
          <Image source={require('./img/logout.png')} style={styles.icon}></Image>
        </View>
        <Text style={styles.label}>Logout</Text>
      </View>
    </TouchableOpacity>
  </ScrollView>
);

const styles = StyleSheet.create({
  item: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  label: {
    margin: 16,
    fontWeight: 'bold',
    color: 'rgba(0, 0, 0, .87)',
  },
  iconContainer: {
    marginHorizontal: 16,
    width: 24,
    alignItems: 'center',
  },
  icon: {
    width: 24,
    height: 24,
  }
});

这篇关于如何手动在抽屉导航的底部添加额外的项目(例如注销按钮)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！