Reduzieren Lücke zwischen Karussell und Paginierung - reagieren-native-Snap-Karussell

stimmen
0

Ich bin neu mit reagieren-native so nur mit Komponenten und Bibliotheken herum spielen. Ich versuche, allgemeines Layout und Styling-Optionen do zu verstehen.

Ich habe Probleme beim Versuch, die Lücke zwischen dem Karussell und der Paginierung zu reduzieren. Ich habe versucht mit dem absoluten Positionierung und negativen Marge aber das hat nicht zu helfen scheint.

render() {
    return (
        <React.Fragment>
            <SafeAreaView forceInset={{ top: 'always' }} style={styles.app}>
                <View style={styles.header}>
                    <Header />
                </View>
                <View style={styles.container}>
                    <View style={styles.carousel}>
                        <Text style={styles.pageTitle}>Featured</Text>
                        <Carousel
                            containerCustomStyle={{
                                flexGrow: 0,
                                paddingTop: 16,
                                paddingBottom: 48,
                            }}
                            sliderWidth={screenWidth}
                            itemWidth={screenWidth - 60}
                            data={this.state.posts}
                            renderItem={this._renderItem}
                            hasParallaxImages={true}
                            onSnapToItem={(index) => this.setState({ activeSlide: index }) }
                        />
                        { this.pagination }
                    </View>
                </View>
            </SafeAreaView>
       </React.Fragment>
   );
}

const styles = StyleSheet.create({
    app: {
        flex: 1,
        backgroundColor: 'white',
    },
    container: {
        flex: 1,
    },
    header: {
        flex: 0.1,
    },
    carousel: {
        flex: 0.5,
    },
    item: {
        width: screenWidth - 60,
        height: screenHeight / 4,
        shadowColor: #000,
        shadowOffset: {
            width: 0,
            height: 16,
        },
        shadowOpacity: 0.50,
        shadowRadius: 10,
        elevation: 16,
    },
    imageContainer: {
        flex: 1,
        marginBottom: Platform.select({ ios: 0, android: 1 }),
        backgroundColor: 'white',
        borderRadius: 25,
    },
    image: {
        ...StyleSheet.absoluteFillObject,
        resizeMode: 'cover',
    },
});

Geben

Veröffentlicht am 03/12/2019 um 00:02
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

Reduzieren Lücke zwischen Karussell und Paginierung - reagieren-native-Snap-Karussell

stimmen
0

Ich bin neu mit reagieren-native so nur mit Komponenten und Bibliotheken herum spielen. Ich versuche, allgemeines Layout und Styling-Optionen do zu verstehen.

Ich habe Probleme beim Versuch, die Lücke zwischen dem Karussell und der Paginierung zu reduzieren. Ich habe versucht mit dem absoluten Positionierung und negativen Marge aber das hat nicht zu helfen scheint.

render() {
    return (
        <React.Fragment>
            <SafeAreaView forceInset={{ top: 'always' }} style={styles.app}>
                <View style={styles.header}>
                    <Header />
                </View>
                <View style={styles.container}>
                    <View style={styles.carousel}>
                        <Text style={styles.pageTitle}>Featured</Text>
                        <Carousel
                            containerCustomStyle={{
                                flexGrow: 0,
                                paddingTop: 16,
                                paddingBottom: 48,
                            }}
                            sliderWidth={screenWidth}
                            itemWidth={screenWidth - 60}
                            data={this.state.posts}
                            renderItem={this._renderItem}
                            hasParallaxImages={true}
                            onSnapToItem={(index) => this.setState({ activeSlide: index }) }
                        />
                        { this.pagination }
                    </View>
                </View>
            </SafeAreaView>
       </React.Fragment>
   );
}

const styles = StyleSheet.create({
    app: {
        flex: 1,
        backgroundColor: 'white',
    },
    container: {
        flex: 1,
    },
    header: {
        flex: 0.1,
    },
    carousel: {
        flex: 0.5,
    },
    item: {
        width: screenWidth - 60,
        height: screenHeight / 4,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 16,
        },
        shadowOpacity: 0.50,
        shadowRadius: 10,
        elevation: 16,
    },
    imageContainer: {
        flex: 1,
        marginBottom: Platform.select({ ios: 0, android: 1 }),
        backgroundColor: 'white',
        borderRadius: 25,
    },
    image: {
        ...StyleSheet.absoluteFillObject,
        resizeMode: 'cover',
    },
});

Geben Sie hier image description

Beantwortet am 03/12/2019 um 00:02
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more