如何在react-native中要求影像

我需要將影像顯示為輪播，我不能正確地要求它們。我試圖在 json 中像這樣 {"Image": require("$PATH")} 或在 ParalaxImage 標記中的 js 檔案中要求它們，但什么都沒有......

專案創建者

_renderItem ({item, index}, parallaxProps) {
    return (
        <View style={styles.item}>
            <ParallaxImage
                source={item.landscapeImage}
                containerStyle={styles.imageContainer}
                style={styles.image}
                parallaxFactor={0.4}
                {...parallaxProps}
            />
        </View>
    );
}

JSON檔案

[
{
    "name": "snydercut",
    "image": "../../assets/moviePictures/snydercut.jpeg",
    "landscapeImage": "../../assets/moviePictures/snydercutLandscape.jpeg"
},
{
    "name": "batman",
    "image": "../../assets/moviePictures/batman.jpeg",
    "landscapeImage": "../../assets/moviePictures/batmanLandscape.jpeg"
},
{
    "name": "avatar",
    "image": "../../assets/moviePictures/avatar.jpeg",
    "landscapeImage": "../../assets/moviePictures/avatarLandscape.jpeg"
}
]

這是我的輪播代碼

render () {
    return (
        <Carousel
            sliderWidth={screenWidth}
            sliderHeight={screenWidth}
            itemWidth={screenWidth - 60}
            data={moviePicturesInfo}
            renderItem={this._renderItem}
            hasParallaxImages={true}
        />
    );
}

uj5u.com熱心網友回復：

我之前沒有將它與 ParallaxImage 組件一起使用，但在我的影像組件的情況下，我只是添加了 uri，對于像你這樣的情況，路徑作為來自外部資源的變數，請使用 uri。所以，這將是這樣的：

_renderItem ({item, index}, parallaxProps) {
    return (
        <View style={styles.item}>
            <ParallaxImage
                source={{uri: item.landscapeImage}}
                containerStyle={styles.imageContainer}
                style={styles.image}
                parallaxFactor={0.4}
                {...parallaxProps}
            />
        </View>
    );
}

如果我犯了錯誤或者您無法理解某些內容，我很抱歉這是我在 stackoverflow 上的第一個答案。如果我無法說清楚，請隨時提出問題。

uj5u.com熱心網友回復：

React Native 不支持在運行時動態地要求影像。

重構您的代碼，如下所示：

[
  {
    name: "snydercut",
    image: require("../../assets/moviePictures/snydercut.jpeg"),
    landscapeImage: require("../../assets/moviePictures/snydercutLandscape.jpeg"),
  },
  {
    name: "batman",
    image: require("../../assets/moviePictures/batman.jpeg"),
    landscapeImage: require("../../assets/moviePictures/batmanLandscape.jpeg"),
  },
  {
    name: "avatar",
    image: require("../../assets/moviePictures/avatar.jpeg"),
    landscapeImage: require("../../assets/moviePictures/avatarLandscape.jpeg"),
  },
];

uj5u.com熱心網友回復：

flatlist通過添加到您的平面串列中，用于輪播中的影像，horizontal={true}例如

<FlatList
            horizontal={true}
            
              data={crldata}
              keyExtractor={({ id }, index) => id}
              renderItem={({ item }) => (
               
                <TouchableOpacity 
                style={{backgroundColor:"white",margin:12,borderRadius:15}}
                onPress={() => {
                    navigation.navigate('detail', {
                    pid: item.id,
                    purl: url,
                    name: item.pname,
                    price: item.price,
                    des: item.des,
                    dc: item.dc,
                    img: item.img,
                  });
                }}>
                <Image
                source={{uri:item.img}}
                style={{ width: '100%',height:250,padding:120}}>
                </Image>
                <Text style={{color:"black",marginLeft:12}}>{item.pname}</Text>
                <Text style={{color:"black",marginLeft:12}}>Price= Rs {item.price}</Text>
                </TouchableOpacity>
              
                
              )}
            />

標籤：javascript 节点.js json 反应式 反应原生快照轮播

上一篇：Mongoose，獲取字串記錄ID

下一篇：如何在快速路由器中使用Axios