在react-native-banner-carousel中设置<View>

时间:2019-06-28 10:29:30

标签: reactjs react-native

我正在使用react-native-banner-carousel库进行轮播,但是我需要使用this类型的视图,但是我尝试更改高度,宽度,填充边距等,但是失败并得到了this任何时候都知道有人要这样做,请帮忙。 任何帮助表示赞赏。谢谢。

    export default class Demo extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: ['1', '2', '3', '4']
        };
    }

    renderView(data, index) {
        return (
            <View key={index} style={{  alignItems: 'center', justifyContent: 'center' }}>
                <View style={{height: 100, width: Dimensions.get("window").width - 150, backgroundColor: "pink" }}></View>
            </View>
        );
    }

    render() {
        return (
            <View style={s.container}>
                <View style={s.bg_img}>
                    <Image 
                        source={Images.app_bg.bg}
                        style={s.img}
                    />
                </View>
                <View style={{position: 'absolute', width: '100%'}}>
                    <View style={{width: '100%', marginTop: 20, justifyContent: 'center', alignItems: 'center'}}>
                        <Carousel
                            autoplay={true}
                            loop
                            index={0}
                            showsPageIndicator={true}
                            pageSize={width}
                            pageIndicatorOffset={17}
                            activePageIndicatorStyle={s.activeIndicator}
                            pageIndicatorStyle={s.pageIndicator}
                        >
                            {this.state.data.map((data, index) => this.renderView(data, index))}
                        </Carousel>
                    </View>
                </View>
            </View>
        );
    }
}

0 个答案:

没有答案