Содержание ящика React-навигации смещено - PullRequest
Новая
       21

Содержание ящика React-навигации смещено

0 голосов
/ 18 февраля 2020

Я пишу приложение React Native, которое использует библиотеку react-navigation 5.x, в частности @react-navigation/drawer. У меня в ящике четыре экрана, каждый со значком и ярлыком.

Снимок экрана

enter image description here

Моя проблема в том, что метки для каждого экрана расположены неправильно - см. «Конфигурация устройства» пункт по сравнению с другими. Выравнивание, кажется, зависит от размера значка, с более широкими значками, смещающими ярлык вправо.

Я пытался жестко запрограммировать размер иконки, чтобы они все были одинаковыми, но это не сработало. Я не уверен, что еще попробовать. Буду признателен за любые идеи!

Мой код: 

function Icon(props) {
    return (
        <Ionicon
            name={props.name}
            size={props.size}
            color={props.color}
        />
    );
}

const DrawerNavigator = createDrawerNavigator();

function Drawer() {

    return (
        <DrawerNavigator.Navigator
            drawerContentOptions={{
                activeTintColor: Colors.drawerScreenSelected
            }}
        >
            <DrawerNavigator.Screen
                name="Home"
                component={Tabs}
                options={{
                    drawerIcon: ({color, size}) => (
                        <Icon name="md-home" color={color} size={size} />
                    )
                }}
            />
            <DrawerNavigator.Screen
                name="Login"
                component={LoginScreen}
                options={{
                    drawerIcon: ({color, size}) => (
                        <Icon name="md-log-in" color={color} size={size} />
                    )
                }}
            />
            <DrawerNavigator.Screen
                name="Device Configuration"
                component={DeviceConfigScreen}
                options={{
                    drawerIcon: ({color, size}) => (
                        <Icon name="md-bluetooth" color={color} size={size} />
                    )
                }}
            />
            <DrawerNavigator.Screen
                name="Email Data"
                component={ExportDataScreen}
                options={{
                    drawerIcon: ({color, size}) => (
                        <Icon name="md-at" color={color} size={size} />
                    )
                }}
            />

        </DrawerNavigator.Navigator>
    );
}

export default Drawer;

1 Ответ

0 голосов
/ 17 апреля 2020

стиль в Icon 

    <DrawerNavigator.Screen
            name="Home"
            component={Tabs}
            options={{
                drawerIcon: ({color, size}) => (
                    <Icon name="md-home" color={color}
                       style={{alignSelf:"center",marginRight:6,paddingLeft:2}}
                     size={size} />
                )
            }}
        />"
...