Ящик реагирующей навигации обновляется несколько раз

Question

Я создаю приложение с React Native и React Navigation, я установил все настройки, и он работает, однако, когда ящик запускается, изображение обновляется несколько раз, вызывая шипы и сбои в работе.содержащиеся в нем кнопки запуска.

например:

Я использую:

react: 16.8.3,  
react-native: 0.59.1,  
react-native-ui-kitten: ^3.1.2,  
react-navigation: ^3.4.0  

Я использовал версию 3 RN и, чтобы попытаться решить, я вернулся к версии2, но безуспешно.

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

Я уже изменил изображение в разных размерах и форматахно это также не помогло.

Я уже тестировал на мобильных телефонах и эмуляторах, но безуспешно.

Ящик:

import React, { Component } from 'react';
import {
    TouchableHighlight,
    View,
    ScrollView,
    Image,
    Platform,
    StyleSheet,
} from 'react-native';

import {
    RkStyleSheet,
    RkText,
    RkTheme,
} from 'react-native-ui-kitten';

import Icon from 'react-native-vector-icons/Ionicons';

import Routes from '../../config/navigation/routes';

import logo from '../../assets/smallLogo.png';

export default function SideNavigation(props) {
    const onMenuItemPressed = item => {
        props.navigation.navigate(item.id);
    };

    const renderIcon = () => (<Image style={styles.image} source={logo}/>);

    const renderMenuItem = item => (
        <TouchableHighlight style={styles.container} key={item.id} underlayColor={RkTheme.current.colors.button.underlay} activeOpacity={1} onPress={() => onMenuItemPressed(item)}>
            <View style={styles.content}>
                <View style={styles.content}>
                    <RkText style={styles.icon} rkType='moon primary xlarge'><Icon name={item.icon} size={25}/></RkText>
                    <RkText rkType='regular'>{item.title}</RkText>
                </View>
                {/*<RkText rkType='awesome secondaryColor small'>{FontAwesome.chevronRight}</RkText>*/}
            </View>
        </TouchableHighlight>
    );

    const renderMenu = () => Routes.map(renderMenuItem);

    return (
        <View style={styles.root}>
            <ScrollView showsVerticalScrollIndicator={false}>
                <View style={[styles.container, styles.content]}>
                    {renderIcon()}
                </View>
                {renderMenu()}
            </ScrollView>
        </View>
    )
}

const styles = RkStyleSheet.create(theme => ({
    container: {
        height: 60,
        paddingHorizontal: 16,
        borderTopWidth: StyleSheet.hairlineWidth,
        borderColor: theme.colors.border.base,
    },
    root: {
        paddingTop: Platform.OS === 'ios' ? 20 : 0,
        backgroundColor: theme.colors.screen.base
    },
    content: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    icon: {
        marginRight: 13,
    },
    image:{
        resizeMode: 'contain',
        maxWidth: 125
    }
}));

Настройка ящика:

import React, {Component} from 'react';
import { View, Text} from 'react-native';
import Login from './screens/login';
import PasswordRecovery from './screens/passwordRecovery';
import Home from './screens/home';

import SideNavigator from './components/sideMenu';

import { bootstrap } from './config/bootstrap';
import {
    createDrawerNavigator,
    createStackNavigator,
    createAppContainer
} from 'react-navigation';
import { withRkTheme } from 'react-native-ui-kitten';
import NavBar from './components/navBar';
import AppRoutes from './config/navigation/routesBuilder';
import Splash from './screens/splash';

bootstrap();

const renderHeader = (navigation, props) => {
    const ThemedNavigationBar = withRkTheme(NavBar);
    return (
        <ThemedNavigationBar navigation={navigation} headerProps={props} />
    );
};

const App = createStackNavigator({
    Splash: Splash,
    Login: Login,
    PasswordRecovery: PasswordRecovery,
    Main: createDrawerNavigator({
        ...AppRoutes
    },{
        contentComponent: props => {
            const SideNav = withRkTheme(SideNavigator);
            return <SideNav {...props}/> 
        }
    }),
},
{
    headerMode: 'none',
})

export default createAppContainer(App);

Настройка маршрутов:

import React from 'react';
import _ from 'lodash';
import { createStackNavigator } from 'react-navigation';
import { withRkTheme } from 'react-native-ui-kitten';
import transition from './transitions';

import Routes from './routes';
import NavBar from '../../components/navBar';

const main = {};
const flatRoutes = {};

const routeMapping = (route) => ({
    screen: withRkTheme(route.screen),
    title: route.title,
});

(Routes).forEach(route => {
    flatRoutes[route.id] = routeMapping(route);
    main[route.id] = routeMapping(route);
    route.children.forEach(nestedRoute => {
        flatRoutes[nestedRoute.id] = routeMapping(nestedRoute);
    });
});

const renderHeader = (navigation, props) => {
    const ThemedNavigationBar = withRkTheme(NavBar);
    return (
        <ThemedNavigationBar navigation={navigation} headerProps={props} />
    );
};

const DrawerRoutes = Object.keys(main).reduce((routes, name) => {
    const rawRoutes = routes;
    rawRoutes[name] = {
        name,
        screen: createStackNavigator(flatRoutes, {
            initialRouteName: name,
            headerMode: 'screen',
            cardStyle: { backgroundColor: 'transparent' },
            transitionConfig: transition,
            defaultNavigationOptions: ({ navigation }) => ({
                gesturesEnabled: false,
                header: (props) => renderHeader(navigation, props),
            }),
        }),
    };
    return rawRoutes;
}, {});

const AppRoutes = DrawerRoutes;