reactjs - 抽屉屏幕内的全屏地图导致抽屉项目按下滞后

Question

所以我目前正在开发一个需要有多个屏幕的抽屉的应用程序，其中一个是地图。最大的问题是，当我打开抽屉并导航到另一个屏幕时，体验非常滞后，因为地图很难渲染。我想要做的是添加一些事件监听器或使用一些导航道具来渲染或不渲染地图，但反应导航事件监听器（'didBlur'，'didFocus'等）没有帮助。有任何想法吗？

import React from 'react';
import { View, TouchableOpacity, SafeAreaView } from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import { Icon } from 'native-base';

class HomeScreen extends React.Component {
    static navigationOptions =
        {
            drawerIcon: <Icon name="map" style={{ fontSize: 25 }} />,
            title: "Acasa"
        }
    render() {
        return (
            <MapView
                style={{ flex: 1, zIndex: 101 }}
                provider={PROVIDER_GOOGLE}
                region={{
                    latitude: 47.141515,
                    longitude: 27.565993,
                    latitudeDelta: 0.0922,
                    longitudeDelta: 0.0421,
                }}
            >
                <Icon name="menu" style={{ position: 'absolute', marginTop: 35, marginLeft: 15, fontSize: 50 }} onPress={() => {
                    this.setState({ isMapVisible: false })
                    this.props.navigation.openDrawer()
                }} />
            </MapView>

        )
    }
}

export default HomeScreen;

标签： reactjsreact-nativereact-navigationreact-native-maps