最后一节用swiper组件智能显示第一图片，第二，第三张图片空白

来源：

稳稳地幸福

2016-12-31

代码是按scott老师配置的我也看了官方文档，不过我rn用0.38 中途遇到很多问题都是自己解决的浪费很多时间现在到了最后一节这个swiper 轮播图不能轮播

写回答

2回答

Scott

2017-01-01

不能轮播不太正常，你对比下我的代码，这个代码是我近期改动的，跟课程已经不一致了，看看哪里可以供你参考下

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
// ES5
const Swiper = require('react-native-swiper')
import React, {Component} from 'react'
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight,
  Dimensions,
} from 'react-native'
const {height, width} = Dimensions.get('window')
export default class Slider extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    const {
      banners,
      sliderLoop,
      enterSlide
    } = this.props
    let innerButton = null
    const bannersSlider = banners.map((item, i) => {
      if (i + 1 === banners.length) {
        let innerButton = (
          <TouchableHighlight style={styles.btn} onPress={enterSlide()}>
            <Text style={styles.btnText}>马上体验</Text>
          </TouchableHighlight>
        )
      }
      
      return (
        <View style={styles.slide}>
          <Image style={styles.image} source={banners[i]}>
            {innerButton}
          </Image>
        </View>
      )
    })
    return (
      <Swiper
        dot={<View style={styles.dot} />}
        activeDot={<View style={styles.activeDot} />}
        paginationStyle={styles.pagination}
        loop={sliderLoop}>
        {bannersSlider}
      </Swiper>
    )
  }
}
const styles = StyleSheet.create({
  slide: {
    flex: 1,
    width: width
  },
  image: {
    flex: 1,
    width: width,
    height: height
  },
  dot: {
    width: 14,
    height: 14,
    backgroundColor: 'transparent',
    borderColor: '#ff6600',
    borderRadius: 7,
    borderWidth: 1,
    marginLeft: 12,
    marginRight: 12
  },
  activeDot: {
    width: 14,
    height: 14,
    borderWidth: 1,
    marginLeft: 12,
    marginRight: 12,
    borderRadius: 7,
    borderColor: '#ee735c',
    backgroundColor: '#ee735c',
  },
  pagination: {
    bottom: 30
  },
  btn: {
    position: 'absolute',
    width: width - 20,
    left: 10,
    bottom: 60,
    height: 50,
    padding: 15,
    backgroundColor: '#ee735c',
    borderColor: '#ee735c',
    borderWidth: 1,
    borderRadius: 3
  },
  btnText: {
    color: '#fff',
    fontSize: 20,
    textAlign: 'center'
  }
})