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. 将组件的代码结构引入到页面上：

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 => {
        // console.warn(JSON.stringify(data, null, '  '))
        this.setState({
          lunbotu: data.message
        })
      })
  }

  render() {
    return 

      {/* 轮播图的结构 */}
      {/* 在 轮播图的 Swiper 组件外面，需要套一层 View，给这个 View 需要手动设置一个高度 */}
      
        

          {this.state.lunbotu.map((item, i) => {
            return 
              
            
          })}

        
      

      {/* 在 RN 中，默认，就已经为 所有的 View 启用了弹性和模型，同时，默认的主轴是 纵向的 */}
      

        
          
          新闻资讯
        

        
          
          图片分析
        

        
          
          商品购买
        

        
          
          视频专区
        

        
          {/* 在 TouchableHighlight 内部，只能放置唯一的一个元素 */}
          
            
            热映电影
          
        

        
          
          联系我们
        

      
    
  }

  // 去电影列表页面
  goMovieList = () => {
    // 在这里要跳转到电影列表，需要使用 编程式导航
    // this.props.history.push
    Actions.movielist()
  }
}