React Native Swiper

虽然不做 React Native 开发好久了，但是最近整理文件的时候发现了当初学习 React Native 的时候做的 Demo，那就顺便整理一下开发笔记，温故而知新。

环境搭建可以参考之前的文章『Windows 平台 React Native 开发环境搭建笔记』。

由于 React Native 源于 React，所以其使用的也是 React 相关的语法，也就是 JavaScript，而在页面视图上，则使用了类似 HTML 和 CSS 的 JSX，有过前端基础的我其实上手并不十分困难，不过由于转向 Android 开发很长一段时间了，写起来也并不十分容易。

不过好在很多组件都已经有大神做了封装，并提供给广大开发者使用，这就在很大程度上方便了我们这些搬砖工的开发。

而『react-native-swiper』则是我接触的第一个第三方组件。

在其 Github 项目主页上，它还十分嚣张的打出了自己的 Title：The best Swiper component for React Native.

那么就来看看它是否真的配得上 The Best 这个头衔。

首先通过 npm 工具把『react-native-swiper』安装到项目中：

➜   npm i react-native-swiper --save

然后将这个 Component 导入到需要应用的页面中：

import Swiper from 'react-native-swiper';

接下来就可以在页面中应用了：

export default class MainLeafContent extends Component {
  render() {
    return (
      <View>
        <View style={styles.banner}>
          <Swiper style={styles.wrapper} autoplay={true}>
            <Image style={styles.banner_image_size} source={require('./images/banner/0.png')} />
            <Image style={styles.banner_image_size} source={require('./images/banner/1.png')} />
            <Image style={styles.banner_image_size} source={require('./images/banner/2.png')} />
          </Swiper>
        </View>
        ...
      </View>
    );
  }
}

const styles = StyleSheet.create({
  banner: {
    height: screenwidth * 673 / 1090,
    width: screenwidth
  },
  banner_image_size: {
    height: screenwidth * 673 / 1090,
    width: screenwidth
  }
  ...
});

module.exports = MainLeafContent;

使用的是 React 的 JSX 语法，在 <View> 中使用 <Swiper> 标签把需要的 <Image> 设定好，并指定样式和资源就可以使用了。

比如我这里在 <Swiper> 中引入了 3 张本地图片，图片存储在 ./images/banner/ 目录下，而 <Swiper> 的父 View 以及 <Image> 都指定宽度填满屏幕，由于图片的尺寸是固定的，所以我按比例来设定了高度。同时，我还为其设定了自动轮播的功能。

最后我把它导出为一个自定义组件，供我在其他页面使用。效果图如下：

上面用到了 autoplay 属性，其实『react-native-swiper』还为我们提供了其他属性，基本属性如下：

当然还有一些自定义属性允许开发者选择，但由于对我来说使用频率并不高，就不贴上来了，需要的时候查查文档就可以，详情可至其 Github 项目主页查看。