图书馆 "react-native-snap-carousel" 没有处理卡片图像

Question

我是 React Native 的新手，我正在尝试使用“react-native-snap-carousel”。传送带正在使用我发送的“carouselItems”变量中的参数，但图像不工作。我想把它作为背景图片放在卡片上，并附上带有相同参数数组的简短描述，但它不起作用。

谁能帮我设置一下？

用于填充卡片的数组：

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

文件夹结构为：自制应用程序/资产/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>
  );
}

看到了如何用assets处理本地文件的文章，还是无法正常使用

Link 到文章：(https://dev.to/fdefreitas/how-to-obtain-a-uri-for-an-image-asset-in-react-native-with-expo-7bm)

Answer 1

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

中的问题

数组

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

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

或者把你的图片放在同一个文件夹里

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

图书馆 "react-native-snap-carousel" 没有处理卡片图像

the library "react-native-snap-carousel" is not processing the card image

javascript

image

slide

reactjs

react-native