我目前正在构建一个包含四个不同屏幕的 React Native 应用程序
Home
、Products
、FAQs
和 Locations
。 HomeScreen
是一个没有显示任何内容的静态屏幕。 Products
、FAQs
和 Locations
屏幕都从名为 data.js
的数据文件中检索它们的数据。 Locations 屏幕包括 react-native-maps
组件,我用它来显示地图。目前,我在各自的屏幕上显示产品名称和常见问题解答,这些名称是从数据文件中检索到的。
我在位置屏幕上遇到了挑战。如果我只显示位置名称,一切正常。但是,当我尝试渲染 Map 组件时,在以下情况下会发生错误:
但是,当我在 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;
这里有一个可以摆弄的工作零食。请让我知道我哪里出错了,我该如何解决。
谢谢