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按钮看起来像其他菜单项并有一个图标

有没有办法用菜单项创建抽屉导航器，菜单项没有屏幕但只是像我这样的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 docs建议使用自定义内容抽屉功能包装抽屉导航。我们这样做是为了给抽屉提供一个注销按钮，同时也将所有Drawer.Screen保持在原位。

在下面的代码中，我们创建一个CustomDrawerContent，其中包含一个DrawerItem作为我们的注销按钮。此函数通过其属性Drawer.Navigator包装drawerContent。然后，我们的最终抽屉将如下所示：

主页（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 3

您可以像以下代码一样设置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 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>

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

5 个答案: