leecade / react-native-swiper

The best Swiper component for React Native.
MIT License
10.4k stars 2.34k forks source link

height={200} doesn't work #1008

Open fairyMouse opened 5 years ago

fairyMouse commented 5 years ago

Which OS ?10.14.5

Version

Which versions are you using:

Expected behaviour

want to set the height of the swiper

Actual behaviour

set height={200} in Swiper tag,it seems doestn't work

How to reproduce it>

To help us, please fork this component, modify one example in examples folder to reproduce your issue and include link here.

Steps to reproduce

1. 2. 3.

mrminhhuy commented 5 years ago

hi, you try set height of parent's Swiper with height 200. Hope help you

noecs commented 5 years ago
import React, { Component } from "react";
import {
    Text,
    View,
    Image,
    Dimensions
} from "react-native";

import Swiper from 'react-native-swiper'

const { width } = Dimensions.get('window');

class IndexScreen extends Component {

    constructor (props) {
        super(props);
        this.state = {
            imgList: [
                'https://img04.sogoucdn.com/app/a/100520021/3ea2745207ce5c390280e5d5245451e9',
                'https://img01.sogoucdn.com/app/a/100520021/8e6ef3612bee7623f5d42e2e88c7b4cb',
                'https://img04.sogoucdn.com/app/a/100520021/26dffdc1ba9adcd3a0bfdb8728f22b9f',
                'https://img04.sogoucdn.com/app/a/100520021/3d23c68fbbcf51e9e297f505e33cdf5e'
            ],
        };
    }

    render() {

        return (
            <View style={{flex: 1}}>
                <Swiper loadMinimal loadMinimalSize={1} style={styles.wrapper} loop={true}>
                    {
                        this.state.imgList.map((item, i) => {
                            return <Image style={styles.image} source={{uri: item}} />
                        })
                    }
                </Swiper>
                <View>
                    <Text>asd</Text>
                </View>
            </View>
        );
    }
}

const styles = {
    wrapper: {
        height: 200,
    },

    slide: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: 'transparent'
    },
    image: {
        width: width,
        flex: 1,
        backgroundColor: 'transparent'
    },
};

export default IndexScreen;

This is my code and it doesn't take effect.

anastely commented 4 years ago

Hey @noecs I follow your code but the image takes a full-screen size and i want that? i just want to take a static height in the top screen like this