javascript react-native-image-slider(无法显示本Map像)

j5fpnvbx 于 2022-11-20 发布在 Java

关注(0)|答案(4)|浏览(152)

使用react-native-image-slider时我的本Map像不显示

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    Button,
    Image,
    TouchableHighlight
} from "react-native";
import ImageSlider from 'react-native-image-slider';

class HomeScreen extends Component {

    render() {          
        return (
            <View style={styles.container}>         
        <View style={{alignItems: 'center'}}>                   
            <ImageSlider
                    loopBothSides
                autoPlayWithInterval={3000}
                images={[
                    '../assets/img/art_1.png',
                    '../assets/img/art_2.png',
                    '../assets/img/art_3.png',          
                ]}  
                style={{width:200, height: 200}}
            />              
        </View>
            </View>
        );
    }
}
export default HomeScreen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
    justifyContent: 'center'
    }
});

屏幕上唯一显示的是圆形图标，它告诉你当前显示的是什么图像。图像本身并不显示。

JavaScript

来源：https://stackoverflow.com/questions/56403384/react-native-image-slider-cannot-display-local-images

4条答案

按热度按时间

jjjwad0x1#

对于本Map像，使用require;

images={[
  require('../assets/img/art_1.png'),
  require('../assets/img/art_2.png'),
  require('../assets/img/art_3.png'),          
]}

赞(0）回复(0）举报 2022-11-20

41zrol4v2#

试试看：
第一个

赞(0）回复(0）举报 2022-11-20

vpfxa7rd3#

试试这个

dataSource = {
  [{
      url: require('../assets/img/RPImages/RP111_1.jpg')
    },
    {
      url: require('../assets/img/RPImages/RP111_2.jpg')
    },
  ]
}

赞(0）回复(0）举报 2022-11-20

mbzjlibv4#

我也有同样的问题。我明白这个问题是很久以前的事了，它会帮助一些人。
根据文档，使用滑块的最简单方法如下：

<ImageSlider 
data={[
    {img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5a5uCP-n4teeW2SApcIqUrcQApev8ZVCJkA&usqp=CAU'},
    {img: 'https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg'},
    {img: 'https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg'}
]}
autoPlay={false}
onItemChanged={(item) => console.log("item", item)}
closeIconColor="#fff"/>

但是如果你想使用本Map像，你必须在slider中使用'require'和属性localimg，如下所示：

<ImageSlider 
data={[
    {img: require('./img/someImg1.jpg')},
    {img: require('./img/someImg2.jpg')},
    {img: require('./img/someImg3.jpg')}
]}
autoPlay={false}
localImg
onItemChanged={(item) => console.log("item", item)}
closeIconColor="#fff"/>

赞(0）回复(0）举报 2022-11-20

我来回答

javascript react-native-image-slider(无法显示本Map像)

4条答案

试试这个

相关问题

热门标签

最新问答