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');  //解構(gòu)賦值 獲取屏幕寬度
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='請(qǐng)輸入關(guān)鍵字' />
                      </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狀態(tài)欄
         height: Platform.OS === 'ios' ? 68 : 48,   // 處理iOS狀態(tài)欄
         backgroundColor: '#4c9ada',
         alignItems: 'center'  // 使元素垂直居中排布, 當(dāng)flexDirection為column時(shí), 為水平居中
     },
     logo: {//圖片logo
         height: 24,
         width: 64,
         resizeMode: 'stretch'  // 設(shè)置拉伸模式

     },
     searchBox:{//搜索框
       height:40,
       flexDirection: 'row',   // 水平排布
       flex:1,
       borderRadius: 5,  // 設(shè)置圓角邊
       backgroundColor: '#4389c4',
       alignItems: 'center',
       marginLeft: 30,
       marginRight:20,
       paddingLeft:10,
       paddingRight:10

     },
     searchIcon: {//搜索圖標(biāo)
         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: {//搜索圖標(biāo)
         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'
     }
 });

想在頂部搜索框下加個(gè)輪播圖，一直都木有效果。