Question

如果这是一个转储问题，我会尝试学习本机反应。

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

我找到了一个示例snack，并尝试将其添加到我的应用中。但是我在HomeScreen.js中收到有关Carousel组件的错误：

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

我不知道问题出在哪里以及如何解决。我检查组件和道具在我使用的版本中是否存在。

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>
  );
}

感谢您的帮助！

Answer 1

我认为您需要从MainTabNavigator.js导出HomeStack：

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

让我知道这是否无效。

世博反应本机元素类型无效：预期为字符串或类/函数，但得到：未定义

1 个答案: