Snížení mezeru mezi karuselem a stránkování - reagovat nativní-snap-karusel

hlasů
0

Jsem nový s reagovat nativní tak jen hraní si s komponenty a knihoven. Snažím se dělat pochopit celkový vzhled a možnosti styling.

Mám potíže se snaží zmenšit propast mezi karuselu a stránkování. Snažil jsem se s použitím absolutní polohy a zápornou marži ale nezdálo se, že pomoc.

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',
    },
});

zadejte

Položena 03/12/2019 v 00:02
zdroj uživatelem
V jiných jazycích...                            


1 odpovědí

Snížení mezeru mezi karuselem a stránkování - reagovat nativní-snap-karusel

hlasů
0

Jsem nový s reagovat nativní tak jen hraní si s komponenty a knihoven. Snažím se dělat pochopit celkový vzhled a možnosti styling.

Mám potíže se snaží zmenšit propast mezi karuselu a stránkování. Snažil jsem se s použitím absolutní polohy a zápornou marži ale nezdálo se, že pomoc.

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',
    },
});

zadejte popis obrázku zde

Odpovězeno 03/12/2019 v 00:02
zdroj uživatelem

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