在屏幕之间导航时反应本机地图错误

问题描述 投票:0回答:0

我目前正在构建一个包含四个不同屏幕的 React Native 应用程序

Home
Products
FAQs
Locations
HomeScreen
是一个没有显示任何内容的静态屏幕。
Products
FAQs
Locations
屏幕都从名为
data.js
的数据文件中检索它们的数据。 Locations 屏幕包括
react-native-maps
组件,我用它来显示地图。目前,我在各自的屏幕上显示产品名称和常见问题解答,这些名称是从数据文件中检索到的。

我在位置屏幕上遇到了挑战。如果我只显示位置名称,一切正常。但是,当我尝试渲染 Map 组件时,在以下情况下会发生错误:

  1. 如果我从主屏幕直接导航到“位置”选项卡, 地图加载没有问题。但是,如果我切换到任何其他选项卡, 我收到一条错误消息。
  2. 如果我从主屏幕导航到“常见问题解答”或“产品”选项卡,并且 然后到位置屏幕,我再次遇到同样的问题。

但是,当我在 FAQs 和 Products 选项卡之间切换时,无论切换多少次都没有错误。

这是我的位置屏幕和导航代码。

LocationsScreen.js

import { useDispatch, useSelector } from 'react-redux';
import { Text, View, StyleSheet } from 'react-native';
import { useIsFocused } from '@react-navigation/native';
import {
  setResults_disp,
  setClearResults_disp,
} from '../features/SearchbarSlice';
import { useEffect, useRef } from 'react';
import data from '../../data/data.json';
import MapView, { Callout, Marker } from 'react-native-maps';
 
const LocationsScreen = () => {
  const focus = useIsFocused();
  const dispatch = useDispatch();
  const { results, isLoading_disp } = useSelector(
    (state) => state.searchReducer
  );
  const mapRef = useRef(null);

  useEffect(() => {
    if (focus) {
      dispatch(setClearResults_disp());
      dispatch(setResults_disp(data[0].locations));
    }
  }, [focus]);

  return (
    <>
      {isLoading_disp && !results.length >= 1 ? (
        <View>
          <Text>Loading</Text>
        </View>
      ) : (
        <View style={{ flex: 1 }}>
          {results && (
            <MapView style={styles.map}>
              {results.map((data, index) => (
                <Marker
                  key={index}
                  coordinate={{
                    latitude: data.latitude,
                    longitude: data.longitude,
                  }}
                  pinColor="#ab7a5f">
                  <Callout>
                    <Text>{data.name}</Text>
                  </Callout>
                </Marker>
              ))}
            </MapView>
          )}
        </View>
      )}
    </>
  );
};

export default LocationsScreen;
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
});

Navigation.js

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { FontAwesome5 } from '@expo/vector-icons';
import HomeScreen from './Screens/HomeScreen';
import ProductsScreen from './Screens/ProductsScreen';
import FAQsScreen from './Screens/FAQsScreen';
import LocationsScreen from './Screens/LocationsScreen';

const Tab = createBottomTabNavigator();
const Navigation = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: () => {
            let iconName;
            if (route.name === 'Home') {
              iconName = 'home';
            } else if (route.name === 'Products') {
              iconName = 'shopping-bag';
            } else if (route.name === 'FAQs') {
              iconName = 'book';
            } else if (route.name === 'Locations') {
              iconName = 'map';
            }
            return <FontAwesome5 name={iconName} size={24} color="black" />;
          },
          headerShown: false,
        })}>
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          screenOptions={{ headerShrown: false }}
        />
        <Tab.Screen
          name="Products"
          component={ProductsScreen}
          initialParams={{ verticalKey: 'products' }}
        />
        <Tab.Screen
          name="FAQs"
          component={FAQsScreen}
          initialParams={{ verticalKey: 'faqs' }}
        />
        <Tab.Screen
          name="Locations"
          component={LocationsScreen}
          initialParams={{ verticalKey: 'locations' }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default Navigation;

这里有一个可以摆弄的工作零食。请让我知道我哪里出错了,我该如何解决。

谢谢

react-native redux-toolkit react-native-maps react-navigation-bottom-tab
© www.soinside.com 2019 - 2024. All rights reserved.