react native常见第三方库集成（一）

前言：react native虽然是当下比较好的跨平台开发解决方案，但是Hybrid APP比较比不上原生开发，有很多效果都无法实现。但是，react native有很多优秀的第三方库，足以满足我们的大部分开发。

来公司快一年了，都主要在维护两个native开发的app（当然，也有很多新需求）和参与一些其他app的模块开发，作为一个菜鸟前端来说，native的环境配置和第三方库的集成对我来说是比较麻烦的（特别是涉及到原生代码的修改），当然，有空的时候自己还是在琢磨，但比较有大佬在上面顶着，一直没有机会自己尝试。这几天比较闲而且马上有一个新项目要开始了，所以自己就准备新建一个项目并集成一下项目中需要的库。

废话太多，下面开始说我集成的一些库（主要是作为一个记录，以后有需要的时候不要到处去找资料）：

我主要用的包管理工具是yarn（也可以用npm或者cnpm）；这里只介绍第三方库的基本集成，属性和方法可以去参考文章和github查找学习。

个人意见：集成第三方库最好不要制定固定的版本，因为可能会和你的react native版本不相符，导致报错！！！

一、native-base：一个用于react native的ui库（ps：还是比较好用）

安装：yarn add native-base（npm install native-base --save)  ==>> 将native-base加入到依赖列表

link：react-native link  ==>> 自动配置native-base在环境中的一些修改

在页面中引入使用：

代码：

import React, {Component} from "react";
import {
    Container,
    Content,
    Button,
    Text,
} from "native-base";

export default class NativeBase extends Component{
    constructor() {
        super();

    }

    render(){
        return(
            <Container>
                <Content>
                    <Button>
                        <Text>Click Me!</Text>
                    </Button>
                </Content>
            </Container>
        )
    }
}

效果：

官方文档：http://docs.nativebase.io/Components.html#Components

github：https://github.com/GeekyAnts/NativeBase

二、react-native-scrollable-tab-view：tab切换的第三方库，我们的项目中常用

安装：yarn add react-native-scrollable-tab-view（npm install react-native-scrollable-tab-view --save）

这个库比较简单，加入到依赖中就可以使用了

代码：

import React, {Component} from "react";
import {
    View,
    Image,
} from "react-native";
import {
    Container,
    Content,
    Button,
    Text,
} from "native-base";
import ScrollableTabView from "react-native-scrollable-tab-view";

export default class TabView extends Component{
    constructor() {
        super();

    }

    render(){
        return(
            <Container>
                <ScrollableTabView  tabBarPosition='bottom'>
                    <Content tabLabel='Tab1'>
                        <Text>111</Text>
                    </Content>
                    <Content tabLabel='Tab1'>
                        <Text>222</Text>
                    </Content>
                    <Content tabLabel='Tab1'>
                        <Text>333</Text>
                    </Content>
                    <Content tabLabel='Tab1'>
                        <Text>444</Text>
                    </Content>
                </ScrollableTabView>
            </Container>
        )
    }
}

效果：

参考博客：https://blog.csdn.net/xiangzhihong8/article/details/72730951?ref=myread

github：https://github.com/happypancake/react-native-scrollable-tab-view

三、react-native-swiper：轮播图

轮播图插件封装的比较好的有react-native-swiper和React-Native-Viewpager 两种，但react-native-swiper的文档比较完善，所以选择了它。当然，React-Native-Viewpager也是比较不错的哦。

安装：yarn add react-native-swiper（npm install react-native-swiper –save）

这个库也是安装后就可以直接使用了。

代码：

import React, {Component} from "react";
import {
    View,
    Image,
    Dimensions,
    StyleSheet,
} from "react-native";
import {
    Container,
    Content,
    Button,
    Text,
} from "native-base";
import Swiper from 'react-native-swiper';

export default class SwiperScreen extends Component{
    constructor() {
        super();

    }

    render(){
        return(
            <Container>
                <Content>
                    <Swiper
                        autoplay={true}     //是否自动播放
                        autoplayTimeout={4}    //自动播放间隔时间（4s）
                        height={200}
                        horizontal={true}
                        paginationStyle={{bottom: 10}}
                        showsButtons={false}>
                        {/* 轮播的是一个组件，所以可以自定义一个view（包含图片或者不包含图片） */}
                        <Image source={require('./img/1.jpg')} style={{height:200,width:Dimensions.get('window').width}}/>
                        <Image source={require('./img/4.jpg')} style={{height:200,width:Dimensions.get('window').width}}/>
                        <Image source={require('./img/15.jpg')} style={{height:200,width:Dimensions.get('window').width}}/>
                    </Swiper>
                </Content>
            </Container>
        )
    }
}

效果：

参考博客：https://blog.csdn.net/u011272795/article/details/72669479

github：https://github.com/leecade/react-native-swiper

个人对react native的看法

        react native是JS框架 React 在原生移动应用平台的衍生产物，有很多思想都是沿用与web端，但有些思想在手机端并不是很好，比如其中的 Image 组件，web端上的<img>标签是不会太过注意流量的损耗的（不多的情况下哈），但在手机上的Image 组件如果不做特殊处理的话，会每次进入页面的根据其 source 属性去请求一次，这样会造成流量的浪费。但这个问题在react native本身是并没有提供太好的解决方法的，只能用原生代码（比较简单）或者第三方库（我没有找到比较好的...）解决。

        总的来说，如果是前端并且不会原生的话，我觉得写react native还是比较麻烦的，特别是在一些底层问题的解决上（还有就是一个思想的不同）。

        这些都纯属个人看法，如有异议，欢迎交流。。。

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！