焦点图是开发APP中经常用到的，刚开始学习react native，先不着急造轮子，因此选用了react-native-swiper

看了下文档，本来想着应该挺简单的，结果发现轮播能切换，但是圆点不跟着动。

banner数据通过API抓取，因此刚开始banner为空，此时组件应该直接return null，这样就解决了

banner组件：

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


class NewsBanner extends Component{

    render(){
        let that=this
        let items=Array()
        let banners=this.props.banners
        if(!banners){
            return null   //没有banners的适合，必须返回null，否则圆点不切换
        }

        for(let key in banners){
            items.push(
                <View style={style.item} key={banners[key]['id']} >
                   <Image source={{uri:banners[key]['playbill']}} style={{flex:1}} resizeMode={'cover'}  />
                </View>

            )
        }


        return(
            <Swiper loop={true}
                    autoplay={true}
                    paginationStyle={{
                        bottom:5,
                        justifyContent:'flex-end'
                    }}
                    activeDot={(
                        <View style={{
                            backgroundColor: '#0C9863',
                            width: 8,
                            height: 8,
                            borderRadius: 4,
                            marginLeft: 3,
                            marginRight: 3,
                            marginTop: 3,
                            marginBottom: 3,
                        }}/>
                    )}
            >
                {items}

            </Swiper>
        )
    }

   
}

const style=StyleSheet.create({
    item:{
       flex:1
    }
})

export default NewsBanner

组件的调用

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


import network from '../../utils/base/network'

import NewsBanner from '../../components/proj/NewsBanner'

class Index extends Component{
    static navigationOptions ={
        header:null  
    }
    constructor(){
        super()
        this.state= {
            banners: ''  //初始banners为空
        }

    }
    componentDidMount(){
        //网络请求banner
        network.get("https://m.3wcoffee.com/api/qf/news/banners").then(response=>{
          
            this.setState({
                banners:response
            })
        })
    }
    render(){
        return(
            <View style={style.container}>
                <View style={style.banner}>
                    <NewsBanner banners={this.state.banners}/>
                </View>
                <Text>首页</Text>
            </View>
        )
    }
   
}

const style=StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'white'
    },
    banner:{
        width:375,
        height:192,
        backgroundColor:'#eee'
    }
})

export default Index

Swiper组件有许多属性，可以定制样式，如设置圆点样式

activeDot={(
                        <View style={{
                            backgroundColor: '#0C9863',
                            width: 8,
                            height: 8,
                            borderRadius: 4,
                            marginLeft: 3,
                            marginRight: 3,
                            marginTop: 3,
                            marginBottom: 3,
                        }}/>
)}

更多属性设置，参见https://github.com/leecade/react-native-swiper

给焦点图增加点击事件，比如点击文章banner，进入文章详情页，刚开始我是把点击事件加在了View上面，怎么点击都没有效果

for(let key in banners){
    items.push(
        <View style={style.item} key={banners[key]['id']} >
            
                <Image source={{uri:banners[key]['playbill']}} style={{flex:1}} resizeMode={'cover'}  onPress={()=>this.props.itemClick(banners[key]['id'])}/>
          

        </View>

    )
}

还是因为对react native不熟悉，onPress属性必须添加到"Touchable"开头的一系列组件

带点击的banner组件如下，其中点击事件的处理，我们调用属性itemClick，把文章id传过去

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


class NewsBanner extends Component{

    render(){
        let that=this
        let items=Array()
        let banners=this.props.banners
        if(!banners){
            return null
        }

        for(let key in banners){
            items.push(
                <View style={style.item} key={banners[key]['id']} >
                    <TouchableHighlight onPress={()=>this.props.itemClick(banners[key]['id'])} style={{flex:1}}>
                        <Image source={{uri:banners[key]['playbill']}} style={{flex:1}} resizeMode={'cover'}  />
                    </TouchableHighlight>

                </View>

            )
        }


        return(
            <Swiper loop={true}
                    autoplay={true}
                    paginationStyle={{
                        bottom:5,
                        justifyContent:'flex-end'
                    }}
                    activeDot={(
                        <View style={{
                            backgroundColor: '#0C9863',
                            width: 8,
                            height: 8,
                            borderRadius: 4,
                            marginLeft: 3,
                            marginRight: 3,
                            marginTop: 3,
                            marginBottom: 3,
                        }}/>
                    )}
            >
                {items}

            </Swiper>
        )
    }

    pressHandle(id){
        alert('点击')


    }

}

const style=StyleSheet.create({
    item:{
       flex:1
    }
})

export default NewsBanner

新闻首页调用banner组件时，设置itemClick属性，如下

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


import network from '../../utils/base/network'

import NewsBanner from '../../components/proj/NewsBanner'

class Index extends Component{
    static navigationOptions ={
        header:null
    }
    constructor(){
        super()
        this.state= {
            banners: ''
        }

    }
    componentDidMount(){
        console.log("首页加载")
        network.get("https://m.3wcoffee.com/api/qf/news/banners").then(response=>{
            console.log(response)
            this.setState({
                banners:response
            })
        })
    }
    render(){
        return(
            <View style={style.container}>
                <View style={style.banner}>
                    <NewsBanner banners={this.state.banners} itemClick={this.itemClick}/>
                </View>
                <Text>首页</Text>
            </View>
        )
    }
    itemClick=(id)=>{
        this.props.navigation.navigate('NewsDetail',{
            id:id
        })
    }
}

const style=StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'white'
    },
    banner:{
        width:375,
        height:192,
        backgroundColor:'#eee'
    }
})

export default Index