【React Native 安卓开发】----第三方框架的引用之React-native-Swiper框架实现欢迎页【第五篇】

本文链接：https://blog.csdn.net/github_33304260/article/details/53929467

本文介绍了如何在React Native中使用React-native-Swiper开源框架创建欢迎页。通过npm安装模块，并展示了框架的基本属性、自定义样式、分页、自动换图和自定义按钮等功能的使用示例。

摘要由CSDN通过智能技术生成

#前言
今天要介绍的是React-native-Swiper这个RN开源框架，如果你不想用第三方的你也可以自己用viewPagerAndroid去实现，这里先不做介绍了，很简单。
想要了解React-native-Swiper源码的童鞋可以在github直接搜索React-native-Swiper。
这里写图片描述
对于安卓同学来说应该都用过ViewPagerIndicator 做引导页或者导航栏，这里就不多说了，今天要讲的React-native-Swiper也是一款非常叼的开源框架，接下来然我们一起来看一看。

#引入依赖和模块
####1.首先进入到工程目录根目录下面即:package.json所在的目录。
（package.json里面有工程信息及所有依赖，相当于安卓的gradle,然后我们所依赖的那些库在node-modules里面，就相当于安卓之前的libs文件夹）

####2.通过npm安装模块
npm i react-native-swiper --save
成功后会有如下显示：
这里写图片描述
这个意思就是安装这个模块到node-modules，同时配置到package.json里面去。
– save的作用就是配置package.json。
如下：会在package.json依赖里面多了一个react_native-swiper:"^1.5.4"

同时让我们观察一下node-modules文件夹：
这里写图片描述
多了react-native-swiper文件

####3.几个常用命令便于管理工程
查看模块：npm view react-native-swiper
删除模块：npm rm react-native-swiper --save (这个添加save会在删除的同时去除package.json中的依赖)
查看帮助命令：npm help 命令（例如npm help -i查看i的使用)

#使用效果
先来看一下效果:
这里写图片描述

下面是代码：可以直接自己coyp自己体验一下，切记AppRegistry.registerComponent('hello', () => hello);需要自己改一下

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Image,
    TouchableOpacity,
    ViewPagerAndroid,
    Navigator,
    View
    } from 'react-native';

import Swiper from 'react-native-swiper';

class hello extends Component {
  render() {
    return (
      <Swiper style={styles.wrapper} showsButtons={true}>
        <View style={styles.slide1}>
          <Text style={styles.text}>Hello Swiper</Text>
        </View>
        <View style={styles.slide2}>
          <Text style={styles.text}>Beautiful</Text>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>And simple</Text>
        </View>
      </Swiper>
    )