Размещение иконок в ящиках

Question

Что я хотел сделать:

• Значок ящика и ярлык ящика расположены близко друг к другу с полем 7

• Положите настройки и выйдите из нижней части ящика

Изображение текущего ящика:

То, что я уже пробовал:

1. Я разработал мой labelStyleв моих DrawerItems пробовал marginRight, marginLeft, paddingRight, paddingLeft, но, похоже, он не двигается близко к значку.

2. Я ввел свой ящик в иконку навигации в параметрах своего ящика Навигатор.Пробовал marginRight, marginLeft, paddingRight, paddingLeft, но, похоже, он не двигается близко к значку.

   (что касается размещения метки ящика ниже, я понятия не имею, как это сделать)

Мой код для моего 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>

Код моей навигации:

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

Answer 1

Попробуйте создатьBottomTabNavigator в ReactNativation.В этом примере внизу создается вкладка регистрации и входа в систему.

import { createBottomTabNavigator } from 'react-navigation';

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