所以我目前正在开发一个 React Native 应用程序，但我收到了这个错误。我认为这可能与我正在使用的某些库的版本有关，但我不确定。

这是我的 app.js 文件

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';
import HomeScreen from './screens/HomeScreen';
import MapScreen from './screens/MapScreen';
import { store } from './store';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import { createStackNavigator } from "react-navigation-stack";

export default function App() {
  const Stack = createStackNavigator();

  return (
    <Provider store={store}>
      <NavigationContainer>
        <SafeAreaProvider>
          <Stack.Navigator>
            <Stack.Screen
            name='HomeScreen'
            component={HomeScreen}
            options={{
              headerShown: false,
            }}
            />
            <Stack.Screen
            name='MapScreen'
            component={MapScreen}
            options={{
              headerShown: false,
            }}
            />
          </Stack.Navigator>
        </SafeAreaProvider>
      </NavigationContainer>
    </Provider>
  );
}

我的 HomeScreen.js 文件，在应用程序启动时呈现。

import React from 'react'
import { StyleSheet, Text, View, SafeAreaView, Image } from 'react-native'
import tw from 'tailwind-react-native-classnames';
import NavOptions from '../components/NavOptions';

const HomeScreen = () => {
    return (
        <SafeAreaView style = {tw`bg-white h-full`}>
            <View style = {tw`p-5`}>
                <Image
                style = {{
                    width: 100,
                    height: 100,
                    resizeMode: "contain",
                }}
                source={{
                    uri: "https://links.papareact.com/gzs"
                }} 
                />
                <NavOptions/>
            </View>
        </SafeAreaView>
    )
}

export default HomeScreen

我的 MapScreen.js 文件，我拥有的另一个屏幕。

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'

const MapScreen = () => {
    return (
        <View>
            <Text>Here is the map stuff...</Text>
        </View>
    )
}

export default MapScreen

NavOptions.js 文件，在屏幕上呈现两个按钮以选择一个。

import { useNavigation } from '@react-navigation/native';
import React from 'react'
import { FlatList, Text, Touchable, TouchableOpacity, View, Image } from 'react-native'
import { Icon } from 'react-native-elements/dist/icons/Icon';
import tw from 'tailwind-react-native-classnames';

const data = [
    {
        id: "123",
        title: "Get a ride",
        image: "https://links.papareact.com/3pn",
        screen: "MapScreen",
    },
    {
        id:"456",
        title:"Order food",
        image: "https://links.papareact.com/28w",
        screen: "EatsScreen", // Change in future....
    }
]

const NavOptions = () => {
    const navigation = useNavigation();

    return (
        <FlatList 
        data = {data} 
        horizontal
        keyExtractor = {(item) => item.id}
        renderItem={({item}) => (
            <TouchableOpacity
                onPress={() => navigation.navigate(item.screen)}
                style = {tw`p-2 pl-6 pb-8 pt-4 bg-gray-200 m-2 w-40`}
            >
                <View>
                    <Image
                    style = {{
                        width: 120,
                        height: 120,
                        resizeMode: "contain",
                    }}
                    source={{
                        uri: item.image
                    }} 
                    />
                    <Text style={tw`mt-2 text-lg font-semibold`}>{item.title}</Text>
                    <Icon 
                    style = {tw`p-2 bg-black rounded-full w-10 mt-4`}
                    name="arrowright" color="white" type="antdesign"/>
                </View>
            </TouchableOpacity>
        )}
        />
    )
}

export default NavOptions