如何在抽屉导航底部手动添加额外项目（如注销按钮）？

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

结果我在菜单底部看到了注销按钮。但我希望它位于抽屉面板的底部

此外，我希望“注销”按钮看起来像其他菜单项并有一个图标

有没有一种方法可以创建抽屉导航器，其中的菜单项没有屏幕，但就像我的情况一样只是注销之类的操作？

Answer 1

您可以设置 position:'absolute' 和 buttom:0 像这样的代码：

<TouchableOpacity 
    onPress={() => {this.logout()}}
    style={{ bottom: 0, position: 'absolute', width: '100%' }}>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection:'row', alignItems: 'center' }}>
        <Icon name="md-log-out" style={{marginRight: 10, color: '#444'}} size={20}/>
        <Text style={{color: '#444'}}>Logout</Text>
      </View>
</TouchableOpacity>

您可以更改样式以使其与其他按钮一样。希望对您有所帮助...

Answer 2

我能够将抽屉菜单底部的注销与将 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 3

React Navigation docs 建议使用自定义内容抽屉功能包装抽屉导航。这就是我们为抽屉提供注销按钮所做的，同时也保留了所有 Drawer.Screens。

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

首页（Drawer.Screen）
编辑个人资料（Drawer.Screen）
登陆（Drawer.Screen）
注销（DrawerItem）

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

Answer 4

类似于 William Griffins 的答案，除了他们的答案没有以抽屉底部的注销按钮结束。为了让注销位于底部，我将 DrawerContentScrollView 放在 SafeAreaView 中，然后在 DrawerContentScrollView 下方放置一个包含 DrawerItem 的常规视图，它是注销按钮。

function CustomDrawerContent(props) {
    return (
        <SafeAreaView style={{flex: 1}} forceInset={{top: "always", horizontal: "never"}}>
            <DrawerContentScrollView {...props}>
                <DrawerItemList {...props} />
            </DrawerContentScrollView>
            <View>
                <DrawerItem label={"Logout"}
                            style={styles.logoutDrawerItem}
                            onPress={() => console.log('Logout pressed!')}
                />
            </View>
        </SafeAreaView>
    );
}

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

const styles = StyleSheet.create({
    logoutDrawerItem: {
        borderRadius: 5,
    },
});

您放置在 DrawerContentScrollView 下方的任何项目都将放置在抽屉的底部。

请注意，我在注销 DrawerItem 上将 borderRadius 设置为 5，以便它与常规抽屉项目的边框半径非常匹配。

Answer 5

接受的答案并没有直接为我解决。我不得不做一些修改，但总的来说，秘密确实是使用 justifyContent: 'space-between'.

import {View} from 'react-native';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItem,
  DrawerItemList,
  DrawerContentComponentProps,
} from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function CustomDrawerContent(props: DrawerContentComponentProps) {
  return (
    <DrawerContentScrollView
      {...props}
      contentContainerStyle={{flex: 1, justifyContent: 'space-between'}}>
      <View style={{justifyContent: 'flex-start'}}>
        <DrawerItemList {...props} />
      </View>
      <DrawerItem
        label="Logout"
        onPress={() => console.log('Logged out')}
      />
    </DrawerContentScrollView>
  );
}

.
.
.

        <Drawer.Navigator
          initialRouteName="HomeScreen"
          drawerContent={(props) => <CustomDrawerContent {...props} />}
          drawerContentOptions={{
            activeTintColor: color.primaryDark,
            itemStyle: {
              backgroundColor: 'transperant',
              borderColor: color.primaryDark,
              borderBottomWidth: 1,
              opacity: 0.8,
            },
          }}
          drawerStyle={styles.drawer}>
          <Drawer.Screen name="Home" component={HomeScreen} />
          <Drawer.Screen name="Notifications" component={NotificationsScreen} />
        </Drawer.Navigator>

如何在抽屉导航底部手动添加额外项目（如注销按钮）？

How to add extra item at the bottom of the drawer navigation manually (like logout button)?

navigation-drawer

react-native

react-navigation