react-native-flatlist-slider 图像不显示

问题描述 投票:0回答:1

App.js

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { FlatListSlider } from 'react-native-flatlist-slider';

const images = [
    {
        image: 'https://cdn-icons-png.flaticon.com/256/4481/4481273.png',
        desc: 'Silent Waters in the mountains in midst of Himilayas',
    },
    {
        image: 'https://cdn-icons-png.flaticon.com/256/4961/4961556.png',
        desc:
            'Red fort in India New Delhi is a magnificient masterpeiece of humans',
    },
    {
        image: 'https://cdn-icons-png.flaticon.com/256/4481/4481273.png',
        desc: 'Silent Waters in the mountains in midst of Himilayas',
    },
    {
        image: 'https://cdn-icons-png.flaticon.com/256/4961/4961556.png',
        desc:
            'Red fort in India New Delhi is a magnificient masterpeiece of humans',
    },
]

const IncomeReceive = () => {
    return (
        <View style={{ flex: 1 }}>
            <FlatListSlider
                data={images}
                width={200}
                timer={5000}
                onPress={item => alert(JSON.stringify(item))}
                indicatorActiveWidth={20}
                contentContainerStyle={{ paddingHorizontal: 16 }}
            />
           
        </View>
    )
}

export default IncomeReceive

const styles = StyleSheet.create({})

输出:

enter image description here

我的图像显示在平板电脑上,但当我在其他设备上显示它们时,它们不显示。我不知道我的错误在哪里。我正在使用

react-native-flatlist-slider

我在这个库上看过一个视频,但在视频中,显示了图像。

有人可以帮助我吗?

reactjs react-native automation uiscrollview
1个回答
1
投票
**work for me** 

 <View style={{ flex: 1 }}>
                <FlatListSlider
                    data={images}
                    width={200}
                    height={200} <--- Add this 
                    timer={5000}
                    onPress={item => alert(JSON.stringify(item))}
                    indicatorActiveWidth={20}
                    contentContainerStyle={{ paddingHorizontal: 16 }}
                />
               
            </View>
© www.soinside.com 2019 - 2024. All rights reserved.