react-native構建基本頁面2---輪播圖+九宮格

配置首頁的輪播圖

1. 輪播圖官網
2. 運行npm i react-native-swiper --save安裝輪播圖組件
3. 匯入輪播圖組件import Swiper from 'react-native-swiper';
4. 其中，在Swiper身上，showsPagination={false}是用來控制頁碼的；showsButtons={false}是用來控制左右箭頭顯示與隱藏；height={160}是用來控制輪播圖區域的高度的！
5. 設定輪播圖的樣式：

var styles = StyleSheet.create({
    wrapper: {},
    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',
    },
    image:{
        width:'100%',
        height:'100%'
    }
})

6. 將組件的代碼結構引入到頁面上：

<Swiper style={styles.wrapper} showsButtons={true} height={160} autoplay={true}>
                <View style={styles.slide1}>
                    <Image source={{uri:'http://www.itcast.cn/images/slidead/BEIJING/2017410109413000.jpg'}} style={styles.image}></Image>
                </View>
                <View style={styles.slide2}>
                    <Image source={{uri:'http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg'}} style={styles.image}></Image>
                </View>
                <View style={styles.slide3}>
                    <Image source={{uri:'http://www.itcast.cn/images/slidead/BEIJING/2017441409442800.jpg'}} style={styles.image}></Image>
                </View>
            </Swiper>

import React, { Component } from 'react'
import { View, Text, StyleSheet, Image, TouchableHighlight } from 'react-native'

// 匯入輪播圖組件
import Swiper from 'react-native-swiper'
// 輪播圖樣式
var styles = StyleSheet.create({
  box: {
    width: '33.33%',
    alignItems: 'center',
    marginTop: 15
  }
})

// Actions 表示要進行路由的JS操作了，可以跳轉到新路由
import { Actions } from 'react-native-router-flux'

export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      lunbotu: [] // 輪播圖陣列
    }
  }


  componentWillMount() {
    fetch('http://vue.studyit.io/api/getlunbo')
      .then(res => res.json())
      .then(data =https://www.cnblogs.com/firebet/p/> {
        // console.warn(JSON.stringify(data, null,'  '))
        this.setState({
          lunbotu: data.message
        })
      })
  }

  render() {
    return <View>

      {/* 輪播圖的結構 */}
      {/* 在 輪播圖的 Swiper 組件外面，需要套一層 View，給這個 View 需要手動設定一個高度 */}
      <View style={{ height: 220 }}>
        <Swiper style={styles.wrapper} showsButtons={true} autoplay={true} loop={true}>

          {this.state.lunbotu.map((item, i) => {
            return <View key={i}>
              <Image source={{ uri: item.img }} style={{ width: '100%', height: '100%' }}></Image>
            </View>
          })}

        </Swiper>
      </View>

      {/* 在 RN 中，默認，就已經為 所有的 View 啟用了彈性和模型，同時，默認的主軸是 縱向的 */}
      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>

        <View style={styles.box}>
          <Image source={require('../../images/menu1.png')} style={{ width: 60, height: 60 }}></Image>
          <Text>新聞資訊</Text>
        </View>

        <View style={styles.box}>
          <Image source={require('../../images/menu2.png')} style={{ width: 60, height: 60 }}></Image>
          <Text>圖片分析</Text>
        </View>

        <View style={styles.box}>
          <Image source={require('../../images/menu3.png')} style={{ width: 60, height: 60 }}></Image>
          <Text>商品購買</Text>
        </View>

        <View style={styles.box}>
          <Image source={require('../../images/menu4.png')} style={{ width: 60, height: 60 }}></Image>
          <Text>視頻專區</Text>
        </View>

        <TouchableHighlight onPress={this.goMovieList} underlayColor="white" style={styles.box}>
          {/* 在 TouchableHighlight 內部，只能放置唯一的一個元素 */}
          <View>
            <Image source={require('../../images/menu5.png')} style={{ width: 60, height: 60 }}></Image>
            <Text>熱映電影</Text>
          </View>
        </TouchableHighlight>

        <View style={styles.box}>
          <Image source={require('../../images/menu6.png')} style={{ width: 60, height: 60 }}></Image>
          <Text>聯系我們</Text>
        </View>

      </View>
    </View>
  }

  // 去電影串列頁面
  goMovieList = () => {
    // 在這里要跳轉到電影串列，需要使用 編程式導航
    // this.props.history.push
    Actions.movielist()
  }
}

標籤：其他

上一篇：react-native構建基本頁面1---主頁：tab欄

下一篇：a標簽打開一個已有頁面自動重繪而不是開一個新標簽