库“ react-native-snap-carousel”未处理卡图像

如何解决库“ react-native-snap-carousel”未处理卡图像

我是React Native的新手，我试图使用“ react-native-snap-carousel”。当我发送时，轮播正在使用“ carouselItems”变量中的参数，但是图像无法正常工作。我以为是将它作为背景图像放置在Card上，带有相同参数数组的简短说明，但无法正常工作。

有人可以帮我设置吗？

用于填充卡片的阵列：

const carouselItems = [
  {
    title: "Doce",text: "[TEXTO DESCRITIVO]",thumbnail: "assets/splash.png",},{
    title: "Salgado",text: "[DESCRIÇÃO]",]

文件夹结构为：自制应用/资产/ splash.png

return (
      <View style={styles.item}>
        <ParallaxImage
          source={{ uri: item.thumbnail }}
          containerStyle={styles.imageContainer}
          style={styles.image}
          parallaxFactor={0.2}
          {...parallaxProps}
        />
        {item.thumbnail}
        <Text style={styles.title} numberOfLines={2}>
          {item.title}
        </Text>
      </View>
    )
  }

  const goForward = () => {
    carouselRef.current.snapToNext();
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={goForward}>
        <Text>go to next slide</Text>
      </TouchableOpacity>
      <Carousel
        layout={"default"}
        ref={ref => carousel = ref}
        data={carouselItems}
        sliderWidth={screenWidth}
        sliderHeight={screenWidth}
        itemWidth={screenWidth - 60}
        renderItem={renderItem}
        onSnapToItem={index => setState({ activeIndex: index })}
        hasParallaxImages={true} />
    </View>
  );
}

我看到了有关如何使用资产处理本地文件的文章，但仍然无法使其正常工作。

链接到文章：（https://dev.to/fdefreitas/how-to-obtain-a-uri-for-an-image-asset-in-react-native-with-expo-7bm）

解决方法

如果您正在使用expo。首先尝试使用静态路由，请记住您需要完整路径而不是资产/ myimage，这是错误的，因为有时从数组中使用它会出现类似问题these的问题。

数组

const carouselItems = [
  {
    title: "Doce",text: "[TEXTO DESCRITIVO]",thumbnail: require("./../assets/splash.png"),},{
    title: "Salgado",text: "[DESCRIÇÃO]",]

<ParallaxImage
    source={require('@expo/snack-static/yourimage.png')}
     ...
/>

或将您的图片放在同一文件夹中

<ParallaxImage
    source={require('./your-image.png')}
     ...
/>