我尝试学习 react-native，如果这是一个垃圾问题，请见谅。

我使用托管流程通过 expo init 创建了一个演示应用程序。并尝试使用 react-native-sideswipe 在主屏幕中添加轮播。

我找到了一个示例 snack 并尝试将其添加到我的应用程序中。但我在 HomeScreen.js 中的轮播组件中收到此错误：

不变违规：不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

我不知道问题是什么，也不知道该如何解决。我检查了组件和道具是否存在于我使用的版本中。

App.js 的相关部分：

  const [isLoadingComplete, setLoadingComplete] = useState(false);

  if (!isLoadingComplete && !props.skipLoadingScreen) {
    return (
      <AppLoading
        startAsync={loadResourcesAsync}
        onError={handleLoadingError}
        onFinish={() => handleFinishLoading(setLoadingComplete)}
      />
    );
  } else {
    return (
      <View style={styles.container}>
        {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
        <AppNavigator />
      </View>
    );
  }
}

AppNavigator.js 的相关部分

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';

import MainTabNavigator from './MainTabNavigator';

export default createAppContainer(
  createSwitchNavigator({
    // You could add another route here for authentication.
    // Read more at https://reactnavigation.org/docs/en/auth-flow.html
    Main: MainTabNavigator,
  })
);

MainTabNavigator.js 的相关部分

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

import HomeScreen from '../screens/HomeScreen';
const config = Platform.select({
  web: { headerMode: 'screen' },
  default: {},
});

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen,
  },
  config
);

HomesSreen.js：

import React from 'react';
import {
  Animated,
  Easing,
  Image,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Dimensions,
} from 'react-native';
import { Constants } from 'expo';
import { MonoText } from '../components/StyledText';

import { Carousel, AnimatedCarouselItem } from 'react-native-sideswipe';
import { Card, Badge } from 'react-native-elements';

const { width } = Dimensions.get('window');
const data = [1, 2, 3, 4, 5];

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <ScrollView
        style={styles.container}
        contentContainerStyle={styles.contentContainer}>
        <View style={styles.welcomeContainer}>
          <Image
            source={require('../assets/images/logo.png')}
            style={styles.headerImage}
          />
        <Carousel
          data={data}
          style={{ width, maxHeight: 225 }}
          itemWidth={width}
          threshold={120}
          contentOffset={0}
          renderItem={({ item }) => (
            <View style={{ width: width, paddingHorizontal: 10 }}>
              <Card
                title="Local Modules"
                containerStyle={{ maxWidth: width, height: 225 }}>
                <Badge value={item} />
                <Text style={{ marginTop: 10 }}>
                  Science
                </Text>
              </Card>
            </View>
          )}
        />
        </View>
        <View style={styles.helpContainer}>


        </View>
      </ScrollView>

      <View style={styles.tabBarInfoContainer}>


      </View>
    </View>
  );
}

感谢您的帮助！