Question

我正在开发一个应用，该应用可以使用Carousel显示一个简单的Image Slider。我已使用“ react-native-banner-carousel”库中的Carousel。

代码：

ImageSlider.js

import React from 'react';
import Carousel from 'react-native-banner-carousel';
import { StyleSheet, Image, View, Dimensions } from 'react-native';

const BannerWidth = Dimensions.get('window').width;
const BannerHeight = 260;

const images = [
    "https://images-na.ssl-images-amazon.com/images/I/61McsadO1OL.jpg",
    "https://images-na.ssl-images-amazon.com/images/I/51vlGuX7%2BFL.jpg",
    "https://images-na.ssl-images-amazon.com/images/I/717DWgRftmL._SX522_.jpg"
];

export default class ImageSlider extends React.Component {
    renderPage(image, index) {
        return (
            <View key={index}>
                <Image style={{ width: 500, height: BannerHeight }} source={{ uri: image }} />
            </View>
        );
    }

    render() {
        return (
            <View style={styles.container}>
                <Carousel
                    autoplay
                    autoplayTimeout={5000}
                    loop
                    index={0}
                    pageSize={BannerWidth}
                >
                    {images.map((image, index) => this.renderPage(image, index))}
                </Carousel>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        justifyContent: 'center'
    },
});

App.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import  Header from './components/Header';
import ImageSlider from './components/ImageSlider';

class App extends Component {
    render () {
        return (
            <View>
                <Header headerText = "SAMPLE APP" />
                <ImageSlider  />
            </View>
        );
    }
}

export default App;

我正在App.js中导入ImageSlider 我正在尝试此链接中提到的方法：https://github.com/f111fei/react-native-banner-carousel

但是我得到的输出有点像这样：

我在哪里错了？

Answer 1

class App extends Component {
render () {
    return (
        <View style={{flex:1}}>
            <Header headerText = "SAMPLE APP" />
            <ImageSlider  />
        </View>
    );
 }
}

在上面的代码中注意

 <View style={{flex:1}}>

希望这会有所帮助。！

使用Carousel实现的图像滑块无法正常工作

1 个答案: