反应导航抽屉多次更新

Question

我正在使用React Native和React Navigation构建一个应用程序，我已经进行了所有设置，并且可以正常工作，但是，当抽屉被触发时，图像会多次更新，从而导致 spikes 和失败触发其中包含的按钮。

例如：

我正在使用：

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

我正在使用RN的第3版，并试图解决问题，所以我又回到了第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;