react-native-swiper在安卓机不显示

Question

import React, { Component } from 'react';
import Swiper from 'react-native-swiper';
import { Container, Header, Left, Body, Right, Button, Icon, Title,Input,Label,Item } from 'native-base';
import {
     Alert,
     AppRegistry,
     StyleSheet,
     Platform,
     Text,
     TextInput,
     View,
     Image,
     Dimensions

} from 'react-native';
const {width} = Dimensions.get('window');  //解构赋值 获取屏幕宽度
export  default class Home extends Component{

     render(){
         return (
             <View >
                  <View style={styles.container}>
                    <Icon name='menu' style={{color:"#fff"}}/>
                      <View style={styles.searchBox}>
                           <Icon name='search' style={{color:"#fff"}} />
                           <TextInput style={styles.inputText}
                                      keyboardType='web-search'
                                      underlineColorAndroid='transparent'
                                      placeholder='请输入关键字' />
                      </View>
                     <Icon name='menu' style={{color:"#fff"}}/>
                 </View>
                 <Swiper style={styles.wrapper} showsButtons>
                     <View style={styles.slide1}>
                         <Text style={styles.text}>Hello Swiper</Text>
                     </View>
                     <View style={styles.slide2}>
                         <Text style={styles.text}>Beautiful</Text>
                     </View>
                     <View style={styles.slide3}>
                         <Text style={styles.text}>And simple</Text>
                     </View>
                 </Swiper>
             </View>
             )
     }
 }
 const styles = StyleSheet.create({
     container: {
         flexDirection: 'row',   // 水平排布
         paddingLeft: 10,
         paddingRight: 10,
         paddingTop: Platform.OS === 'ios' ? 20 : 0,  // 处理iOS状态栏
         height: Platform.OS === 'ios' ? 68 : 48,   // 处理iOS状态栏
         backgroundColor: '#4c9ada',
         alignItems: 'center'  // 使元素垂直居中排布, 当flexDirection为column时, 为水平居中
     },
     logo: {//图片logo
         height: 24,
         width: 64,
         resizeMode: 'stretch'  // 设置拉伸模式

     },
     searchBox:{//搜索框
       height:40,
       flexDirection: 'row',   // 水平排布
       flex:1,
       borderRadius: 5,  // 设置圆角边
       backgroundColor: '#4389c4',
       alignItems: 'center',
       marginLeft: 30,
       marginRight:20,
       paddingLeft:10,
       paddingRight:10

     },
     searchIcon: {//搜索图标
         height: 20,
         width: 20,
         marginLeft: 5,
         resizeMode: 'stretch'
     },
     inputText:{
       flex:1,
       backgroundColor:'#4389c4',
       fontSize:15,
       color:"#fff"
     },
     voiceIcon: {
         marginLeft: 5,
         marginRight: 8,
         width: 15,
         height: 20,
         resizeMode: 'stretch'
     },
     scanIcon: {//搜索图标
         height: 26.7,
         width: 26.7,
         resizeMode: 'stretch'
     },
     wrapper:{
        width:'100%',
        height:200
     },
     slide1: {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
         backgroundColor: '#9DD6EB'
     },
     slide2: {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
         backgroundColor: '#97CAE5'
     },
     slide3: {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
         backgroundColor: '#92BBD9'
     }
 });

想在顶部搜索框下加个轮播图，一直都木有效果。

Answer 1

_renderSwiper(){
    return(
        <View style={styles.SwiperContainer}>
            <Swiper style={styles.wrapper}
                    height={150}
                    autoplay={true}
                    paginationStyle={{bottom: 10}}
                    dot={<View style={{           //未选中的圆点样式
                        backgroundColor: 'rgba(0,0,0,.2)',
                        width: 6,
                        height: 6,
                        borderRadius: 3,
                        marginLeft: 10,
                    }}/>}
                    activeDot={<View style={{    //选中的圆点样式
                        backgroundColor: '#ffffff',
                        width: 6,
                        height: 6,
                        borderRadius: 3,
                        marginLeft: 10,
                    }}/>}>
                {
                    this.state.dataSource.map((rowData, index) => (
                        <View style={styles.slide} key={rowData.id}
                             >
                            <Image resizeMode='stretch' style={styles.wrapperImage}
                                   source={{uri: Util.imgPath + rowData.picurl}}/>
                        </View>
                    ))
                }
            </Swiper>
        </View>
    )
}
样式：
    SwiperContainer: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
},
wrapper: {
    width: Util.size.width,
},
slide: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'transparent',
},
wrapperImage: {
    width: Util.size.width,
    flex: 1
},

Answer 2

这个问题不存在啊。。。