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

Question

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

我试图使用contentComponent以下方式:

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
  }
});

在结果中,我有菜单底部的Logout按钮.但我希望它位于抽屉面板的底部

此外,我希望Logout按钮看起来像其他菜单项并有一个图标

有没有办法用菜单项创建抽屉导航器,菜单项没有屏幕,但只是像我的情况一样的注销操作？

Answer 1

我能够将抽屉菜单底部的Logout与添加justifyContent: 'space-between'到ScrollView容器对齐.你可以在图片中看到结果

结果源代码看起来如下:

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,
  }
});

Answer 2

React Navigation 文档建议使用自定义内容抽屉功能包装抽屉导航。我们这样做是为了给我们的抽屉一个注销按钮，但同时也保持所有的Drawer.Screens 到位。

在下面的代码中，我们创建了一个CustomDrawerContent包含 的DrawerItem作为我们的注销按钮。此函数Drawer.Navigator通过其属性包装drawerContent。我们最终的抽屉看起来像：

• 主页（抽屉.屏幕）
• 编辑配置文件 (Drawer.Screen)
• 着陆（抽屉.屏幕）
• 注销（抽屉项目）

const Drawer = createDrawerNavigator();

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem label={() => <Text style={{ color: 'white' }}>Logout</Text>}
        style={{backgroundColor: 'red'}} 
        onPress={() => alert('Logged out')}
      />
    </DrawerContentScrollView>
  );
}

function App(props) {
  return (
    <Provider store={store}>
      <View style={styles.container}>
        <StatusBar translucent={true} />
        <NavigationContainer>
          <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
            <Drawer.Screen name='Home' component={Home} />
            <Drawer.Screen name='Edit Profile' component={EditProfile} />
            <Drawer.Screen name='Landing' component={Landing} />
          </Drawer.Navigator>
        </NavigationContainer>
      </View>
    </Provider>
  )
}