图像不会呈现 - 与“react-native-snap-carousel”苦苦挣扎答案

【问题标题】：Images wont render - Struggling with 'react-native-snap-carousel'图像不会呈现 - 与“react-native-snap-carousel”苦苦挣扎
【发布时间】：2021-08-17 00:59:25
【问题描述】：

不幸的是，我很难真正掌握这个库的工作原理，特别是 ParallaxImage 组件。我想知道是否有人可以帮助我。我正在努力渲染我的图像。

这里是文档：https://www.npmjs.com/package/react-native-snap-carousel#props-methods-and-getters

这是下面的代码，但我也有一个零食已经在运行它here

顺便说一句，它不会在网络上加载，你必须选择 IOS 或 android。

import React, {useRef, useState, useEffect} from 'react';
import Carousel, {ParallaxImage} from 'react-native-snap-carousel';
import {
  View,
  Text,
  Dimensions,
  StyleSheet,
  TouchableOpacity,
  Platform,
} from 'react-native';

const ENTRIES1 = [
  {
    title: 'Text',
    thumbnail: require('./assets/splash.png'),
  },
  {
    title: 'Text 1',
    thumbnail: require('./assets/splash.png'),
  },
  {
    title: 'Text 2',
    thumbnail: require('./assets/splash.png'),
  },
];
const {width: screenWidth} = Dimensions.get('window');

const MyCarousel = props => {
  const [entries, setEntries] = useState([]);
  const carouselRef = useRef(null);

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

  useEffect(() => {
    setEntries(ENTRIES1);
  }, []);

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

  return (
    <View style={styles.container}>
      <Carousel
        ref={carouselRef}
        sliderWidth={screenWidth}
        sliderHeight={screenWidth}
        itemWidth={screenWidth - 60}
        data={entries}
        renderItem={renderItem}
        hasParallaxImages={true}
      />
    </View>
  );
};

export default MyCarousel;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    width: screenWidth - 60,
    height: screenWidth - 60,
  },
  imageContainer: {
    flex: 1,
    marginBottom: Platform.select({ios: 0, android: 1}), // Prevent a random Android rendering issue
    backgroundColor: 'white',
    borderRadius: 8,
  },
  image: {
    ...StyleSheet.absoluteFillObject,
    resizeMode: 'cover',
  },
});

【问题讨论】：

标签： react-native react-native-snap-carousel

【解决方案1】：

我认为您需要将 source={{uri: item.thumbnail}} 替换为 source={item.thumbnail} 因为uri 用于网络图像网址，如https://image.png 和require 用于本地图像。我在我的 android 上进行了测试，现在可以正常工作了

【讨论】：