React Native 第三方库之 react-native-

React Native 的最佳 Swiper 组件。

安装

$ npm i react-native-swiper --save

Basic

属性

属性	默认	类型	描述
horizontal	true	bool	如果为true，则滚动视图的子项将水平排列成行而不是垂直排列。
loop	true	bool	设置为false以禁用连续循环模式。
index	0	number	初始幻灯片的索引号。
showsButtons	false	bool	设置为true使控制按钮可见。
autoplay	false	bool	设置为true启用自动播放模式。
onIndexChanged	(index)=>null	funcation	用户滑动时使用新索引调用

实例

1. 代码

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

import Swiper from 'react-native-swiper';

export default class App extends Component {
  render() {
    return (
      <Swiper
        style={styles.container}
        showsButtons = {true}
      >
        <View style={styles.slide1}>
          <Text style={styles.text}>Android</Text>
        </View>
        <View style={styles.slide2}>
          <Text style={styles.text}>iOS</Text>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>Java</Text>
        </View>
      </Swiper>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    
  },
  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',
    },
    text: {
      color: '#fff',
      fontSize: 30,
      fontWeight: 'bold',
    }
});

2. 效果图

swiper01.jpg

Swiper

1. 代码

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

const { width } = Dimensions.get('window');

import Swiper from 'react-native-swiper';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Swiper style={styles.wrapper} height={140}
          onMomentumScrollEnd={(e, state, context) => console.log('index:', state.index)}
          dot={<View style={{ backgroundColor: 'rgba(0,0,0,.2)', width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3 }} />}
          activeDot={<View style={{ backgroundColor: '#000', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3 }} />}
          paginationStyle={{
            bottom: -23, left: null, right: 10
          }} 
          autoplay = {true}
      >
          <View style={styles.slide} title={<Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>}>
            <Image resizeMode='stretch' style={styles.image} source={require('./img/a.jpg')} />
          </View>
          <View style={styles.slide} title={<Text numberOfLines={1}>Big lie behind Nine’s new show</Text>}>
            <Image resizeMode='stretch' style={styles.image} source={require('./img/b.jpg')} />
          </View>
          <View style={styles.slide} title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}>
            <Image resizeMode='stretch' style={styles.image} source={require('./img/c.jpg')} />
          </View>
          <View style={styles.slide} title={<Text numberOfLines={1}>Learn from Kim K to land that job</Text>}>
            <Image resizeMode='stretch' style={styles.image} source={require('./img/d.jpg')} />
          </View>
        </Swiper>
      </View>
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: 200,
    width:width
  },
  wrapper: {
  
  },
  slide: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'transparent'
  },
  text: {
      color: '#fff',
      fontSize: 30,
      fontWeight: 'bold',
  },
  image: {
    width,
    height: 120,
    flex: 1
    }
});

2. 效果图

swiper02.jpg

SwiperNumber

实例

1. 代码

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

const { width } = Dimensions.get('window');

import Swiper from 'react-native-swiper';

const renderPagination = (index, total, context) => {
  return (
    <View style= {styles.paginationStyle}>
      <Text style={styles.text}>
        <Text style={styles.paginationText}>{index+1}</Text>/{total}
      </Text>
    </View>
  );
}
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Swiper style={styles.wrapper} 
          renderPagination = {renderPagination}
          loop = {false}
        >
          <View
            style={styles.slide}
            title={<Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>} 
          >
            <Image
              resizeMode='stretch'
              style={styles.image}
              source={require('./img/a.jpg')}             
            />
          </View>
          <View
            style={styles.slide}
            title={<Text numberOfLines={1}>Big lie behind Nine’s new show</Text>}
          >
            <Image
              resizeMode='stretch'
              style={styles.image}
              source={require('./img/b.jpg')}    
            />
          </View>
          <View
            style={styles.slide}
            title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}
          >
            <Image
              resizeMode='stretch'
              style={styles.image}
              source={require('./img/c.jpg')}  
            />
          </View>
          <View
            style={styles.slide}
            title={<Text numberOfLines={1}>Learn from Kim K to land that job</Text>}>
            <Image
              resizeMode='stretch'
              style={styles.image}
              source={require('./img/d.jpg')}
            />
          </View>
        </Swiper>
      </View>
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: 200,
    width:width
  },
  wrapper: {
  
  },
  slide: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'transparent'
  },
  text: {
      color: 'grey',
  },
  image: {
    width,
    height: 120,
    flex: 1
  },
  paginationText: {
    color: 'white',
    fontSize: 18
  },
  paginationStyle: {
    position: 'absolute',
    bottom: 10,
    right: 10
  },
});

2. 效果图

swiper03.jpg