抽屉图标位置

Question

我想做什么：

• 抽屉的图标和抽屉的标签彼此靠近，边距为7

• 在抽屉底部放置设置和注销

当前抽屉的图像：

我已经尝试过的内容：

1. 我在DrawerItems中设置了labelStyle的样式，尝试了marginRight，marginLeft，paddingRight，paddingLeft，但它似乎并没有靠近Icon。

2. 我在我的抽屉导航器的navigationOptions内部设置了我的抽屉图标样式。尝试了marginRight，marginLeft，paddingRight，paddingLeft，但它似乎并没有靠近Icon。

   （至于在下面放置抽屉标签，我不知道该怎么做）

我用于customDrawerComponent的代码是：

const CustomDrawerComponent = (props)=>(
  <SafeAreaView>
    <View style={{ flexDirection: 'row', height:150, backgroundColor: 
     Colors.white, alignItems:'center', alignSelf: 'flex-start', marginLeft: 
 15,}}>
    <Image source={Images.trump} style={{height:80, width:80, 
    borderRadius:80/2}} />
    <View>
      <Text style={{marginLeft: 10,marginBottom: 5, fontSize: 16,  
             fontFamily: 'CoreSansD55Bold', color: Colors.gray,}}>      Donald 
    </Text>
      <Text style={{marginLeft: 12, fontSize: 9, color: Colors.heavyGray, 
     fontFamily: 'CoreSansD35Regular', }}> Graphic Designer </Text> 
    </View>

</View>
<ScrollView>
  <DrawerItems {...props}  
  activeTintColor= {Colors.white} 
  activeBackgroundColor={Colors.white} 
  inactiveTintColor={Colors.white} 
  inactiveBackgroundColor='transparent' 
  labelStyle={{ color: Colors.heavyGray , fontFamily: 'CoreSansD35Regular', 
fontWeight: 'normal', fontSize: 15,  }}
  />
</ScrollView>

我的navigationOptions代码：

JobFeed: {
screen: DashboardStack,
navigationOptions: {
  drawerLabel: 'Job Feed',
  drawerLockMode: 'locked-closed',
  drawerIcon: ({ tintColor }) => (
  <Icon4 name = "briefcase" size = {15} color = {Colors.heavyGray}/>  )  
}

Answer 1

在ReactNativation中尝试createBottomTabNavigator。此示例在底部创建一个注册和登录选项卡。

import { createBottomTabNavigator } from 'react-navigation';

const Login = createBottomTabNavigator({
   Login: LoginTab,
   Register: RegisterTab
 }, {
tabBarOptions: {
    activeBackgroundColor: '#9575CD',
    inactiveBackgroundColor: '#D1C4E9',
    activeTintColor: '#ffffff',
    inactiveTintColor: 'gray'
 }
});